Food/food
3
0
Fork 0
Code Issues 60 Pull Requests Actions Packages Projects Releases Wiki Activity

【类 型】：style 格式变动

Browse Source 
【原  因】：
【过  程】：
【影  响】：
This commit is contained in:
szdot 2024-07-25 05:13:30 +08:00
parent 79c1dc2978
commit b072965257
4 changed files with 315 additions and 151 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

165
src/components/MapBox.vue
View File

@ -17,8 +17,10 @@ export default {
lngLats: [], // 航线 所有航点 lngLats: [], // 航线 所有航点
wayLngLats: [], // 航线 不包括起点航点 wayLngLats: [], // 航线 不包括起点航点
takeoffLngLats: [], // 航线 第一个航点 起点 最后一个航点 takeoffLngLats: [], // 航线 第一个航点 起点 最后一个航点
isflow: false, // 飞机经纬度变化时是否跟随飞机
// 地图样式 // 地图样式
GoogleRasterStyle: { // mapbox官方样式 卫星地图 GoogleRasterStyle: {
// mapbox官方样式 卫星地图
name: 'Mapbox Streets', name: 'Mapbox Streets',
sprite: this.$store.state.settings.host + '/Public/map/sprite', sprite: this.$store.state.settings.host + '/Public/map/sprite',
glyphs: 'mapbox://fonts/mapbox/{fontstack}/{range}.pbf', glyphs: 'mapbox://fonts/mapbox/{fontstack}/{range}.pbf',
@ -34,7 +36,8 @@ export default {
}, },
MapBoxglRasterStyle: 'mapbox://styles/mapbox/outdoors-v12', // mapbox官方样式 矢量街道 MapBoxglRasterStyle: 'mapbox://styles/mapbox/outdoors-v12', // mapbox官方样式 矢量街道
MapBoxglSatellite: 'mapbox://styles/mapbox/satellite-streets-v12', // mapbox官方样式 卫星街道 MapBoxglSatellite: 'mapbox://styles/mapbox/satellite-streets-v12', // mapbox官方样式 卫星街道
GaodeVectorStyle: { // 第三方 高德矢量 GaodeVectorStyle: {
// 第三方 高德矢量
name: 'Gaode Vector', name: 'Gaode Vector',
sprite: this.$store.state.settings.host + '/Public/map/sprite', sprite: this.$store.state.settings.host + '/Public/map/sprite',
glyphs: 'mapbox://fonts/mapbox/{fontstack}/{range}.pbf', glyphs: 'mapbox://fonts/mapbox/{fontstack}/{range}.pbf',
@ -43,12 +46,15 @@ export default {
gaode: { gaode: {
type: 'raster', type: 'raster',
tileSize: 256, // 瓦片大小 256 512像素 tileSize: 256, // 瓦片大小 256 512像素
tiles: ['http://wprd04.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}'] tiles: [
'http://wprd04.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}'
]
} }
}, },
layers: [{ id: 'GaodeVectorLayer', type: 'raster', source: 'gaode' }] layers: [{ id: 'GaodeVectorLayer', type: 'raster', source: 'gaode' }]
}, },
GaodeRasterStyle: { // 第三方 高德卫星 GaodeRasterStyle: {
// 第三方 高德卫星
name: 'Gaode Raster', name: 'Gaode Raster',
sprite: this.$store.state.settings.host + '/Public/map/sprite', sprite: this.$store.state.settings.host + '/Public/map/sprite',
glyphs: 'mapbox://fonts/mapbox/{fontstack}/{range}.pbf', glyphs: 'mapbox://fonts/mapbox/{fontstack}/{range}.pbf',
@ -57,7 +63,9 @@ export default {
gaode: { gaode: {
type: 'raster', type: 'raster',
tileSize: 256, // 瓦片大小 256 512像素 tileSize: 256, // 瓦片大小 256 512像素
tiles: ['https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}'] tiles: [
'https://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}'
]
} }
}, },
layers: [{ id: 'GaodeRasterLayer', type: 'raster', source: 'gaode' }] layers: [{ id: 'GaodeRasterLayer', type: 'raster', source: 'gaode' }]
@ -73,7 +81,8 @@ export default {
} }
}, },
mounted () { mounted () {
this.init().then(() => { // 地图初始化之后 this.init().then(() => {
// 地图初始化之后
this.map.on('load', () => { this.map.on('load', () => {
/* 更新样式，添加自定义 sprite */ /* 更新样式，添加自定义 sprite */
@ -114,14 +123,16 @@ export default {
// 长按事件 传longPress到组件外部调用 // 长按事件 传longPress到组件外部调用
let pressTimer let pressTimer
this.map.on('mousedown', (event) => { // pc端点击事件 this.map.on('mousedown', (event) => {
// pc端点击事件
pressTimer = setTimeout(() => { pressTimer = setTimeout(() => {
const lngLat = this.map.unproject(event.point) const lngLat = this.map.unproject(event.point)
// 将经纬度信息传递到组件外部 // 将经纬度信息传递到组件外部
this.$emit('longPress', lngLat) this.$emit('longPress', lngLat)
}, 1000) // 作为长按的时间阈值 }, 1000) // 作为长按的时间阈值
}) })
this.map.on('touchstart', (event) => { // 移动端点击事件 this.map.on('touchstart', (event) => {
// 移动端点击事件
pressTimer = setTimeout(() => { pressTimer = setTimeout(() => {
const lngLat = this.map.unproject(event.point) const lngLat = this.map.unproject(event.point)
// 将经纬度信息传递到组件外部 // 将经纬度信息传递到组件外部
@ -142,7 +153,8 @@ export default {
*/ */
async init () { async init () {
// token // token
mapboxgl.accessToken = 'pk.eyJ1Ijoic3pkb3QiLCJhIjoiY2xhN2pkMWFoMHJ4eTN3cXp6bmlzaHZ0NCJ9.3hH-EAUr0wQCaLvIM2lBMQ' mapboxgl.accessToken =
'pk.eyJ1Ijoic3pkb3QiLCJhIjoiY2xhN2pkMWFoMHJ4eTN3cXp6bmlzaHZ0NCJ9.3hH-EAUr0wQCaLvIM2lBMQ'
// 实例化map // 实例化map
this.map = new mapboxgl.Map({ this.map = new mapboxgl.Map({
container: 'map', container: 'map',
@ -153,21 +165,31 @@ export default {
bearing: 0, bearing: 0,
projection: 'globe' projection: 'globe'
}) })
// 地图控件 /* 地图控件 */
this.map.addControl(new mapboxgl.NavigationControl(), 'top-right')// 移动旋转指南针 // 移动旋转指南针
// this.map.addControl(new mapboxgl.ScaleControl(), 'top-right')// 地图比例 this.map.addControl(new mapboxgl.NavigationControl(), 'top-right')
this.map.addControl(new mapboxgl.FullscreenControl(), 'top-right')// 全屏 // 地图比例
this.map.addControl( // this.map.addControl(new mapboxgl.ScaleControl(), 'top-right')
new mapboxgl.GeolocateControl({ // 全屏
positionOptions: { this.map.addControl(new mapboxgl.FullscreenControl(), 'top-right')
enableHighAccuracy: true // 跟随飞机
}, // this.map.addControl(
// When active the map will receive updates to the device's location as it changes. // new mapboxgl.GeolocateControl({
trackUserLocation: true, // positionOptions: {
// Draw an arrow next to the location dot to indicate which direction the device is heading. // enableHighAccuracy: true
showUserHeading: true // },
// trackUserLocation: true,
// showUserHeading: true
// }), 'top-right'
// )
const customControl = new CustomControl({
label: '点',
onClick: () => {
this.isflow = !this.isflow
this.goto({ lng: 20, lat: 30 })// 跳转到飞机位置
}
}) })
)// 跟随 this.map.addControl(customControl, 'top-right')
}, },
/** /**
* @description: 清除地图上的航线 * @description: 清除地图上的航线
@ -215,7 +237,9 @@ export default {
this.takeoffLngLats.push(this.lngLats[2]) this.takeoffLngLats.push(this.lngLats[2])
this.takeoffLngLats.push(this.lngLats[1]) this.takeoffLngLats.push(this.lngLats[1])
this.takeoffLngLats.push(this.lngLats[this.lngLats.length - 2]) this.takeoffLngLats.push(this.lngLats[this.lngLats.length - 2])
} else if (routeObj.questAss.tasks[this.lngLats.length - 1].command === 21) { } else if (
routeObj.questAss.tasks[this.lngLats.length - 1].command === 21
) {
this.takeoffLngLats.push(this.lngLats[2]) this.takeoffLngLats.push(this.lngLats[2])
this.takeoffLngLats.push(this.lngLats[1]) this.takeoffLngLats.push(this.lngLats[1])
} }
@ -290,12 +314,14 @@ export default {
// 航点 图标 PS:home点 起飞点 航点 送餐点等 // 航点 图标 PS:home点 起飞点 航点 送餐点等
this.lngLats.forEach((item, index) => { this.lngLats.forEach((item, index) => {
// home点 // home点
if (index === 0) { // 第一点home点 if (index === 0) {
// 第一点home点
this.map.addSource('home_point', { this.map.addSource('home_point', {
type: 'geojson', type: 'geojson',
data: { data: {
type: 'FeatureCollection', type: 'FeatureCollection',
features: [{ features: [
{
type: 'Feature', type: 'Feature',
geometry: { geometry: {
type: 'Point', type: 'Point',
@ -304,7 +330,8 @@ export default {
properties: { properties: {
'marker-symbol': 'homePoint' // home点图标 'marker-symbol': 'homePoint' // home点图标
} }
}] }
]
} }
}) })
this.map.addLayer({ this.map.addLayer({
@ -317,19 +344,23 @@ export default {
'icon-allow-overlap': true 'icon-allow-overlap': true
} }
}) })
} else if (index === 1) { // 起飞点 } else if (index === 1) {
// 起飞点
let takeoffPoint let takeoffPoint
// 起点图标设定 根据最后一个航点为RETURN_TO_LAUNCH 20 返回起点降落 或者 最后一个航点为LAND 21 指定点降落 // 起点图标设定 根据最后一个航点为RETURN_TO_LAUNCH 20 返回起点降落 或者 最后一个航点为LAND 21 指定点降落
if (routeObj.questAss.tasks[this.lngLats.length - 1].command === 20) { if (routeObj.questAss.tasks[this.lngLats.length - 1].command === 20) {
takeoffPoint = 'takeoffLandPoint' takeoffPoint = 'takeoffLandPoint'
} else if (routeObj.questAss.tasks[this.lngLats.length - 1].command === 21) { } else if (
routeObj.questAss.tasks[this.lngLats.length - 1].command === 21
) {
takeoffPoint = 'takeoffPoint' takeoffPoint = 'takeoffPoint'
} }
this.map.addSource('takeoff_point', { this.map.addSource('takeoff_point', {
type: 'geojson', type: 'geojson',
data: { data: {
type: 'FeatureCollection', type: 'FeatureCollection',
features: [{ features: [
{
type: 'Feature', type: 'Feature',
geometry: { geometry: {
type: 'Point', type: 'Point',
@ -338,7 +369,8 @@ export default {
properties: { properties: {
'marker-symbol': takeoffPoint // 起飞点图标 'marker-symbol': takeoffPoint // 起飞点图标
} }
}] }
]
} }
}) })
this.map.addLayer({ this.map.addLayer({
@ -351,22 +383,29 @@ export default {
'icon-allow-overlap': true 'icon-allow-overlap': true
} }
}) })
} else { // waypoint点 } else {
if (index !== this.lngLats.length - 1) { // 最后一个点不显示 要不和最后一个点结合 要不和起点结合 // waypoint点
if (index !== this.lngLats.length - 1) {
// 最后一个点不显示 要不和最后一个点结合 要不和起点结合
let wayPoint = 'wayPoint' let wayPoint = 'wayPoint'
if (index === this.lngLats.length - 2) { // 降落点 如果是LAND 21 和最后一个waypoint点结合 if (index === this.lngLats.length - 2) {
if (routeObj.questAss.tasks[this.lngLats.length - 1].command === 21) { // 降落点 如果是LAND 21 和最后一个waypoint点结合
if (
routeObj.questAss.tasks[this.lngLats.length - 1].command === 21
) {
wayPoint = 'wayLandPoint' wayPoint = 'wayLandPoint'
} }
} }
if (routeObj.questAss.tasks[index].command === 94) { // command字段为94既然 投放放勾航点 放勾图标 if (routeObj.questAss.tasks[index].command === 94) {
// command字段为94既然 投放放勾航点 放勾图标
wayPoint = 'hookPoint' wayPoint = 'hookPoint'
} }
this.map.addSource('way_point' + index, { this.map.addSource('way_point' + index, {
type: 'geojson', type: 'geojson',
data: { data: {
type: 'FeatureCollection', type: 'FeatureCollection',
features: [{ features: [
{
type: 'Feature', type: 'Feature',
geometry: { geometry: {
type: 'Point', type: 'Point',
@ -375,7 +414,8 @@ export default {
properties: { properties: {
'marker-symbol': wayPoint 'marker-symbol': wayPoint
} }
}] }
]
} }
}) })
this.map.addLayer({ this.map.addLayer({
@ -403,13 +443,18 @@ export default {
properties: {}, properties: {},
geometry: { geometry: {
type: 'LineString', type: 'LineString',
coordinates: coordinatesArray.map(coord => [coord[0], coord[1], coord[2]]) coordinates: coordinatesArray.map((coord) => [
coord[0],
coord[1],
coord[2]
])
} }
} }
// 不是第一次 则改变路径图层里面得数据 // 不是第一次 则改变路径图层里面得数据
if (this.map.getLayer('path')) { if (this.map.getLayer('path')) {
this.map.getSource('path').setData(geojson) this.map.getSource('path').setData(geojson)
} else { // 第一次在地图里添加路径图层 } else {
// 第一次在地图里添加路径图层
// 如果坐标数组不为空，创建新路径 // 如果坐标数组不为空，创建新路径
if (coordinatesArray.length > 0) { if (coordinatesArray.length > 0) {
// 添加3D图层 // 添加3D图层
@ -445,14 +490,18 @@ export default {
// 创建一个marker对象 // 创建一个marker对象
this.planes[index] = new mapboxgl.Marker(customIcon) this.planes[index] = new mapboxgl.Marker(customIcon)
.setLngLat([plane.lng, plane.lat]) .setLngLat([plane.lng, plane.lat])
.setPopup(new mapboxgl.Popup({ offset: 25 }).setHTML('<h3>' + plane.name + '</h3><hr><p>macID:' + plane.macadd + '</p>')) // 添加弹出窗口 .setPopup(
new mapboxgl.Popup({ offset: 25 }).setHTML(
'<h3>' + plane.name + '</h3><hr><p>macID:' + plane.macadd + '</p>'
)
) // 添加弹出窗口
.addTo(this.map) .addTo(this.map)
}, },
/** /**
* @description: 移除页面上的所有飞机 * @description: 移除页面上的所有飞机
*/ */
removePlanes () { removePlanes () {
this.planes.forEach(plane => { this.planes.forEach((plane) => {
plane.remove() plane.remove()
}) })
this.planes = [] this.planes = []
@ -461,9 +510,9 @@ export default {
* @description: 实时更新经纬度 * @description: 实时更新经纬度
* @param {obj} lnglat lng经度 lat纬度 * @param {obj} lnglat lng经度 lat纬度
* @param {*} index 飞机序号 * @param {*} index 飞机序号
* @param {*} pathArr 是否创建轨迹 * @param {*} pathArr 飞机轨迹 痕迹坐标数组
*/ */
setPlaneLngLat (lnglat, index, pathArr, isflow) { setPlaneLngLat (lnglat, index, pathArr) {
// 设置新的经纬度 // 设置新的经纬度
const plane = this.planes[index] const plane = this.planes[index]
if (plane != null) { if (plane != null) {
@ -473,7 +522,7 @@ export default {
this.createPathWithArray(pathArr) // 创建轨迹 this.createPathWithArray(pathArr) // 创建轨迹
console.log(pathArr) console.log(pathArr)
// 镜头跟随飞机 // 镜头跟随飞机
if (isflow) { if (this.isflow) {
this.map.flyTo({ this.map.flyTo({
center: lnglat, center: lnglat,
speed: 2, speed: 2,
@ -523,9 +572,35 @@ export default {
this.$store.commit('app/setDefaultZoom', this.map.getZoom()) // 记录当前经纬度 缺省 this.$store.commit('app/setDefaultZoom', this.map.getZoom()) // 记录当前经纬度 缺省
this.map.remove() // 清除地图资源 this.map.remove() // 清除地图资源
} }
},
watch: {
isflow (val) {
console.log(val)
} }
} }
}
class CustomControl {
constructor ({ label, onClick }) {
this._label = label
this._onClick = onClick
}
onAdd (map) {
this._map = map
this._container = document.createElement('div')
this._container.className = 'mapboxgl-ctrl mapboxgl-ctrl-group'
this._button = document.createElement('button')
this._button.textContent = this._label
this._button.onclick = this._onClick
this._container.appendChild(this._button)
return this._container
}
onRemove () {
this._container.parentNode.removeChild(this._container)
this._map = undefined
}
}
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

16
src/styles/index.scss
View File

@ -65,6 +65,7 @@ label {
.disno { .disno {
display: none; display: none;
} }
.z90 { .z90 {
z-index: 90; z-index: 90;
} }
@ -87,11 +88,13 @@ label {
.el-button { .el-button {
font-size: 16px !important; font-size: 16px !important;
} }
/*抽屉样式 默认上侧加圆角*/ /*抽屉样式 默认上侧加圆角*/
.el-drawer { .el-drawer {
border-top-left-radius: 10px; border-top-left-radius: 10px;
border-top-right-radius: 10px; border-top-right-radius: 10px;
} }
/* 抽屉样式 大于480px时的圆角样式 */ /* 抽屉样式 大于480px时的圆角样式 */
.el-drawer-large { .el-drawer-large {
border-top-left-radius: 10px !important; border-top-left-radius: 10px !important;
@ -247,15 +250,20 @@ label {
/* 当屏幕宽度小于等于420px时 */ /* 当屏幕宽度小于等于420px时 */
@media (max-width: 420px) { @media (max-width: 420px) {
.el-dialog { .el-dialog {
width: 90% !important; /* 根据需要调整宽度 */ width: 90% !important;
max-width: 360px !important; /* 根据需要设置最大宽度 */ /* 根据需要调整宽度 */
max-width: 360px !important;
/* 根据需要设置最大宽度 */
} }
.el-message-box { .el-message-box {
width: 90% !important; /* 调整宽度以适应小屏幕 */ width: 90% !important;
max-width: 360px !important; /* 根据需要设置最大宽度 */ /* 调整宽度以适应小屏幕 */
max-width: 360px !important;
/* 根据需要设置最大宽度 */
} }
} }
/*隐藏声音api 的弹出框*/ /*隐藏声音api 的弹出框*/
.rvNotification { .rvNotification {
display: none; display: none;

161
src/views/layout/components/headbar.vue
View File

@ -2,7 +2,10 @@
<div> <div>
<!-- menu缩进按钮 --> <!-- menu缩进按钮 -->
<div class="w-50px h-50px fc l" id="menuTabB" @click="handleCollapse"> <div class="w-50px h-50px fc l" id="menuTabB" @click="handleCollapse">
<i class="iconfont f-s-26" :class="isCollapse ? 'icon-a-yousuojin3x' : 'icon-a-zuosuojin3x'"></i> <i
class="iconfont f-s-26"
:class="isCollapse ? 'icon-a-yousuojin3x' : 'icon-a-zuosuojin3x'"
></i>
</div> </div>
<!-- 面包屑 --> <!-- 面包屑 -->
<Breadcrumb class="l l-h-50 m-l-5" /> <Breadcrumb class="l l-h-50 m-l-5" />
@ -10,37 +13,68 @@
<div class="right-menu m-r-5"> <div class="right-menu m-r-5">
<el-dropdown class="avatar-container" trigger="click"> <el-dropdown class="avatar-container" trigger="click">
<div class="avatar-wrapper"> <div class="avatar-wrapper">
<img v-if="avatar.indexOf('.jpg') !== -1 || avatar.indexOf('.gif') !== -1 || avatar.indexOf('.png') !== -1" <img
:src="avatar + '?imageView2/1/w/80/h/80'" class="user-avatar"> v-if="
avatar.indexOf('.jpg') !== -1 ||
avatar.indexOf('.gif') !== -1 ||
avatar.indexOf('.png') !== -1
"
:src="avatar + '?imageView2/1/w/80/h/80'"
class="user-avatar"
/>
<el-avatar v-else size="medium" icon="el-icon-user-solid"></el-avatar> <el-avatar v-else size="medium" icon="el-icon-user-solid"></el-avatar>
<i class="el-icon-caret-bottom"></i> <i class="el-icon-caret-bottom"></i>
</div> </div>
<el-dropdown-menu slot="dropdown" class="user-dropdown"> <el-dropdown-menu slot="dropdown" class="user-dropdown">
<el-dropdown-item divided @click.native="logout"> <el-dropdown-item divided @click.native="logout">
<span style="display:block;">退出登录</span> <span style="display: block">退出登录</span>
</el-dropdown-item> </el-dropdown-item>
</el-dropdown-menu> </el-dropdown-menu>
</el-dropdown> </el-dropdown>
</div> </div>
<!-- 页面刷新 --> <!-- 页面刷新 -->
<div class="l-h-50 p-r-15 r"> <div class="l-h-50 p-r-15 r">
<el-button size="small" icon="iconfont icon-shuaxin" @click="refreshPage" circle></el-button> <el-button
size="small"
icon="iconfont icon-shuaxin"
@click="refreshPage"
circle
></el-button>
</div> </div>
<!-- 订单信息按钮 --> <!-- 订单信息按钮 -->
<el-badge :hidden="pendingCount + processingCount + shippedCount + requestedCount == 0 ? true : false" <el-badge
:value="pendingCount + processingCount + shippedCount + requestedCount" class="navbarBadge l-h-50 p-r-15 r"> :hidden="
<el-button :type="pendingCount + processingCount + shippedCount + requestedCount !== 0 ? 'primary' : ''" pendingCount + processingCount + shippedCount + requestedCount == 0
@click="drawer = true" size="small" :icon="orderIcon" circle></el-button> ? true
: false
"
:value="pendingCount + processingCount + shippedCount + requestedCount"
class="navbarBadge l-h-50 p-r-15 r"
>
<el-button
:type="
pendingCount + processingCount + shippedCount + requestedCount !== 0
? 'primary'
: ''
"
@click="drawer = true"
size="small"
:icon="orderIcon"
circle
></el-button>
</el-badge> </el-badge>
<el-drawer :custom-class="drawerAuto ? 'el-drawer-small' : 'el-drawer-large'" :visible.sync="drawer" <el-drawer
:size="drawerAuto ? '90%' : '60%'" :append-to-body="true" :modal-append-to-body="false" :custom-class="drawerAuto ? 'el-drawer-small' : 'el-drawer-large'"
:direction="drawerAuto ? 'btt' : 'rtl'"> :visible.sync="drawer"
:size="drawerAuto ? '90%' : '60%'"
:append-to-body="true"
:modal-append-to-body="false"
:direction="drawerAuto ? 'btt' : 'rtl'"
>
<template slot="title"> <template slot="title">
<div> <div>
<i class="l f-s-18 iconfont icon-jinjidingdan m-r-5 l-h-18"></i> <i class="l f-s-18 iconfont icon-jinjidingdan m-r-5 l-h-18"></i>
<h3> <h3>待处理订单</h3>
待处理订单
</h3>
</div> </div>
</template> </template>
<el-button-group class="m-l-20 m-b-15"> <el-button-group class="m-l-20 m-b-15">
@ -50,7 +84,10 @@
<el-tab-pane> <el-tab-pane>
<template slot="label"> <template slot="label">
<span>未接单</span> <span>未接单</span>
<el-badge :hidden="pendingCount == 0 ? true : false" :value="pendingCount"> <el-badge
:hidden="pendingCount == 0 ? true : false"
:value="pendingCount"
>
</el-badge> </el-badge>
</template> </template>
<QuestTabs :list="pendingList" /> <QuestTabs :list="pendingList" />
@ -58,7 +95,10 @@
<el-tab-pane> <el-tab-pane>
<template slot="label"> <template slot="label">
<span>已接单</span> <span>已接单</span>
<el-badge :hidden="processingCount == 0 ? true : false" :value="processingCount"> <el-badge
:hidden="processingCount == 0 ? true : false"
:value="processingCount"
>
</el-badge> </el-badge>
</template> </template>
<QuestTabs :list="processingList" /> <QuestTabs :list="processingList" />
@ -66,7 +106,10 @@
<el-tab-pane> <el-tab-pane>
<template slot="label"> <template slot="label">
<span>已发货</span> <span>已发货</span>
<el-badge :hidden="shippedCount == 0 ? true : false" :value="shippedCount"> <el-badge
:hidden="shippedCount == 0 ? true : false"
:value="shippedCount"
>
</el-badge> </el-badge>
</template> </template>
<QuestTabs :list="shippedList" /> <QuestTabs :list="shippedList" />
@ -74,7 +117,10 @@
<el-tab-pane> <el-tab-pane>
<template slot="label"> <template slot="label">
<span>退款申请中</span> <span>退款申请中</span>
<el-badge :hidden="requestedCount == 0 ? true : false" :value="requestedCount"> <el-badge
:hidden="requestedCount == 0 ? true : false"
:value="requestedCount"
>
</el-badge> </el-badge>
</template> </template>
<QuestTabs :list="requestedList" /> <QuestTabs :list="requestedList" />
@ -83,9 +129,21 @@
</el-drawer> </el-drawer>
<!-- mqtt状态灯 --> <!-- mqtt状态灯 -->
<div class="l-h-50 p-r-15 r"> <div class="l-h-50 p-r-15 r">
<el-button size="small" :type="mqttState === true ? 'success' : 'danger'" <el-button
:icon="mqttState === true ? 'iconfont icon-yaokong2' : 'iconfont icon-yaokong2-copy'" circle size="small"
@click="mqttState === true ? $message.success('指令服务器链接正常') : $message.error('未链接到指令服务器')"></el-button> :type="mqttState === true ? 'success' : 'danger'"
:icon="
mqttState === true
? 'iconfont icon-yaokong2'
: 'iconfont icon-yaokong2-copy'
"
circle
@click="
mqttState === true
? $message.success('指令服务器链接正常')
: $message.error('未链接到指令服务器')
"
></el-button>
</div> </div>
</div> </div>
</template> </template>
@ -140,13 +198,20 @@ export default {
* @description: 获取 所有已付款订单列表 * @description: 获取 所有已付款订单列表
*/ */
paidOrderList () { paidOrderList () {
return this.$store.state.paidOrderList.filter(item => item.shop_id === this.shop_id) return this.$store.state.paidOrderList.filter(
(item) => item.shop_id === this.shop_id
)
}, },
/** /**
* @description: 过滤 未接单 并且没有申请退款的 订单 * @description: 过滤 未接单 并且没有申请退款的 订单
*/ */
pendingList () { pendingList () {
return this.paidOrderList.filter(item => item.main_status === '已付款' && item.shipment_status === '未接单' && item.refund_status !== '申请中') return this.paidOrderList.filter(
(item) =>
item.main_status === '已付款' &&
item.shipment_status === '未接单' &&
item.refund_status !== '申请中'
)
}, },
/** /**
* @description: 未接单 总数 * @description: 未接单 总数
@ -158,7 +223,12 @@ export default {
* @description: 过滤 已接单 并且没有申请退款的 订单 * @description: 过滤 已接单 并且没有申请退款的 订单
*/ */
processingList () { processingList () {
return this.paidOrderList.filter(item => item.main_status === '已付款' && item.shipment_status === '已接单' && item.refund_status !== '申请中') return this.paidOrderList.filter(
(item) =>
item.main_status === '已付款' &&
item.shipment_status === '已接单' &&
item.refund_status !== '申请中'
)
}, },
/** /**
* @description: 已接单 总数 * @description: 已接单 总数
@ -170,7 +240,12 @@ export default {
* @description: 过滤 已发货 并且没有申请退款的 订单 * @description: 过滤 已发货 并且没有申请退款的 订单
*/ */
shippedList () { shippedList () {
return this.paidOrderList.filter(item => item.main_status === '已付款' && item.shipment_status === '已发货' && item.refund_status !== '申请中') return this.paidOrderList.filter(
(item) =>
item.main_status === '已付款' &&
item.shipment_status === '已发货' &&
item.refund_status !== '申请中'
)
}, },
/** /**
* @description: 已发货 总数 * @description: 已发货 总数
@ -182,7 +257,9 @@ export default {
* @description: 过滤 退款申请中 订单 * @description: 过滤 退款申请中 订单
*/ */
requestedList () { requestedList () {
return this.paidOrderList.filter(item => item.refund_status === '申请中') return this.paidOrderList.filter(
(item) => item.refund_status === '申请中'
)
}, },
/** /**
* @description: 退款申请中 总数 * @description: 退款申请中 总数
@ -195,7 +272,13 @@ export default {
* @return {*} 图标样式 * @return {*} 图标样式
*/ */
orderIcon () { orderIcon () {
if (this.pendingCount + this.processingCount + this.shippedCount + this.requestedCount === 0) { if (
this.pendingCount +
this.processingCount +
this.shippedCount +
this.requestedCount ===
0
) {
return 'iconfont icon-meiyoudingdan-01' return 'iconfont icon-meiyoudingdan-01'
} else { } else {
if (this.animationTrumpet) { if (this.animationTrumpet) {
@ -217,9 +300,7 @@ export default {
/** /**
* @description: 计算订单数量 订单变化播放声音 显示在图标右上角小红圈内 * @description: 计算订单数量 订单变化播放声音 显示在图标右上角小红圈内
*/ */
computeQuestList () { computeQuestList () {},
},
/** /**
* @description: 刷新当前页面 * @description: 刷新当前页面
*/ */
@ -238,9 +319,9 @@ export default {
* @description: 登出 * @description: 登出
*/ */
logout () { logout () {
this.$store.dispatch('user/destroyUserAsync').then( this.$store
this.$router.push('/login') .dispatch('user/destroyUserAsync')
) .then(this.$router.push('/login'))
} }
}, },
watch: { watch: {
@ -250,7 +331,8 @@ export default {
if (this.getQuestInterval !== null) { if (this.getQuestInterval !== null) {
clearInterval(this.getQuestInterval) clearInterval(this.getQuestInterval)
} }
if (newVal.length > 0) { // 订单更新时 订单数大于0 面包条订单图标跳动 if (newVal.length > 0) {
// 订单更新时 订单数大于0 面包条订单图标跳动
this.getQuestInterval = setInterval(() => { this.getQuestInterval = setInterval(() => {
this.animationTrumpet = !this.animationTrumpet // 面包条订单图标跳动 this.animationTrumpet = !this.animationTrumpet // 面包条订单图标跳动
}, 500) }, 500)
@ -271,13 +353,12 @@ export default {
} }
} }
}, },
created () { created () {}
}
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import "@/styles/theme.scss"; @import '@/styles/theme.scss';
#menuTabB:hover { #menuTabB:hover {
background-color: $white-color; background-color: $white-color;
@ -308,10 +389,10 @@ export default {
&.hover-effect { &.hover-effect {
cursor: pointer; cursor: pointer;
transition: background .3s; transition: background 0.3s;
&:hover { &:hover {
background: rgba(0, 0, 0, .025) background: rgba(0, 0, 0, 0.025);
} }
} }
} }

4
src/views/layout/components/main/planes/index.vue
View File

@ -74,7 +74,6 @@ export default {
this.$refs.mapbox.removePlanes()// 先清除画布上现有的飞机 this.$refs.mapbox.removePlanes()// 先清除画布上现有的飞机
this.$refs.mapbox.makePlane(plane)// 创建飞机 this.$refs.mapbox.makePlane(plane)// 创建飞机
this.$refs.mapbox.goto({ lng: plane.lng, lat: plane.lat })// 跳转到飞机位置 this.$refs.mapbox.goto({ lng: plane.lng, lat: plane.lat })// 跳转到飞机位置
console.log('hi')
}, },
/** /**
* @description: 创建航线 * @description: 创建航线
@ -125,7 +124,7 @@ export default {
if (this.localCount % 100 === 1) { if (this.localCount % 100 === 1) {
localStorage.setItem(this.plane.name, `{ "lng": ${lng}, "lat": ${lat} }`) localStorage.setItem(this.plane.name, `{ "lng": ${lng}, "lat": ${lat} }`)
} }
this.$refs.mapbox.setPlaneLngLat({ lng: lng, lat: lat }, 0, val, true)// 更新飞机位置 并画出轨迹 跟随飞机 this.$refs.mapbox.setPlaneLngLat({ lng: lng, lat: lat }, 0, val)// 更新飞机位置 并画出轨迹 跟随飞机
} }
}, },
deep: true deep: true
@ -144,6 +143,7 @@ export default {
} }
} }
} }
</script> </script>
<style lang="scss" scoped></style> <style lang="scss" scoped></style>