大屏二级工程信息带出
This commit is contained in:
parent
dcb863bef2
commit
8890e61eb6
File diff suppressed because it is too large
Load Diff
|
|
@ -13,6 +13,8 @@
|
|||
"build": "node build/build.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@jiaminghi/data-view": "^2.10.0",
|
||||
"autofit.js": "^3.1.1",
|
||||
"axios": "^0.21.1",
|
||||
"echarts": "^5.4.1",
|
||||
"echarts-gl": "^2.0.9",
|
||||
|
|
@ -33,8 +35,6 @@
|
|||
"vuex": "^3.6.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@jiaminghi/data-view": "^2.10.0",
|
||||
"autofit.js": "^3.1.1",
|
||||
"autoprefixer": "^7.1.2",
|
||||
"babel-core": "^6.22.1",
|
||||
"babel-helper-vue-jsx-merge-props": "^2.0.3",
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.2 KiB |
|
|
@ -18,7 +18,6 @@ export default {
|
|||
this.initMap()
|
||||
}
|
||||
)
|
||||
|
||||
},
|
||||
beforeDestroy() {
|
||||
/** 组件销毁之前 先清除地图实例 */
|
||||
|
|
@ -41,8 +40,18 @@ export default {
|
|||
this.$route.query.location[0] || 117.13805,
|
||||
this.$route.query.location[1] || 31.8734
|
||||
) // 创建点坐标
|
||||
console.log(point, 'point--')
|
||||
// let point = new BMapGL.Point(this.calLon, this.calLat) // 创建点坐标
|
||||
this.map.centerAndZoom(point, 15) // 初始化地图，设置中心点坐标和地图级别
|
||||
// 如果存在工程数据，则设置地图视口为第一个工程的位置
|
||||
// if (this.projectList.length > 0) {
|
||||
// const firstProjectPosition = new BMapGL.Point(
|
||||
// this.projectList[0].longitude,
|
||||
// this.projectList[0].latitude
|
||||
// )
|
||||
// this.map.setCenter(firstProjectPosition)
|
||||
// this.map.setZoom(13) // 你可以根据需要调整缩放级别
|
||||
// }
|
||||
this.map.enableScrollWheelZoom(true) // 启用滚轮放大缩小
|
||||
this.map.setHeading(64.5) //设置地图旋转角度
|
||||
this.map.setTilt(73) //设置地图的倾斜角度
|
||||
|
|
@ -98,7 +107,7 @@ export default {
|
|||
)
|
||||
// 可以添加标注
|
||||
// this.addInfoWindow(marker, points[i].title)
|
||||
|
||||
console.log(111111,points[i])
|
||||
if (points[i].type === 2) {
|
||||
// let opts = {
|
||||
// width: 320, // 信息窗口宽度
|
||||
|
|
@ -118,15 +127,35 @@ export default {
|
|||
})
|
||||
}
|
||||
|
||||
marker.addEventListener('click', function (e) {
|
||||
// infoWindow.open(this.map, marker)
|
||||
// infoWindow.setPosition(marker.getPosition())
|
||||
// this.map.openInfoWindow(infoWindow, this.map.getCenter())
|
||||
console.log(e, '地图点击了--')
|
||||
_this.$emit('openDrawer', e.target.data)
|
||||
})
|
||||
}
|
||||
if (points[i].type === 1) {
|
||||
console.log('project--',points[i])
|
||||
// let opts = {
|
||||
// width: 320, // 信息窗口宽度
|
||||
// height: 280, // 信息窗口高度
|
||||
// title: points[i].typeModelName, // 信息窗口标题
|
||||
// }
|
||||
// const mapHtml = `<div style="height: 35px;line-height: 35px;letter-spacing: 1px;font-size: 16px"><span>设备编码：</span>${points[i].maCode}</div><div style="height: 35px;line-height: 35px;letter-spacing: 1px;;font-size: 16px"><span>设备状态：${points[i].maStatus}</span></div><div style="height: 35px;line-height: 35px;letter-spacing: 1px;;font-size: 16px"><span>领用工程：${points[i].projectName}</span></div><div style='border-bottom: 2px dashed #3484ff;margin:15px 0'></div><div style="height: 35px;line-height: 35px;letter-spacing: 1px;;font-size: 16px"><span>设备编码：${points[i].iotId}</span></div><div style="height: 35px;line-height: 35px;letter-spacing: 1px;;font-size: 16px"><span>设备状态：在用/电量/${points[i].voltagepercent}%</span></div><div style="height: 35px;line-height: 35px;letter-spacing: 1px;;font-size: 16px"><span>当前位置：</span></div>`
|
||||
const mapHtml = `<div class='my-info-windowPro'><div class='my-info-window-content'><div style="height: 35px;line-height: 35px;letter-spacing: 1px;font-size: 16px"><span>工程名称：</span>${points[i].lotName}</div><div class='my-info-window-content'><div style="height: 35px;line-height: 35px;letter-spacing: 1px;font-size: 16px"><span>地址：</span>${points[i].address}</div></div>`
|
||||
let infoWindow = new BMapGL.InfoWindow(mapHtml) // 创建信息窗口对象
|
||||
// marker.openInfoWindow(infoWindow) // 打开信息窗口
|
||||
// 可以绑定点击事件打开信息窗口
|
||||
marker.addEventListener('mouseover', function () {
|
||||
this.openInfoWindow(infoWindow, this.map.getCenter())
|
||||
})
|
||||
marker.addEventListener('mouseout', function () {
|
||||
this.closeInfoWindow(infoWindow)
|
||||
})
|
||||
}
|
||||
|
||||
// marker.addEventListener('click', function (e) {
|
||||
// // infoWindow.open(this.map, marker)
|
||||
// // infoWindow.setPosition(marker.getPosition())
|
||||
// // this.map.openInfoWindow(infoWindow, this.map.getCenter())
|
||||
// console.log(e, '地图点击了--')
|
||||
// _this.$emit('openDrawer', e.target.data)
|
||||
// })
|
||||
}
|
||||
console.log('ssss',positionList)
|
||||
this.map.setViewport(positionList)
|
||||
})
|
||||
},
|
||||
|
|
@ -137,6 +166,15 @@ export default {
|
|||
province: this.$route.query.province,
|
||||
})
|
||||
this.projectList = res
|
||||
// 如果存在工程数据，则设置地图视口为第一个工程的位置
|
||||
// if (this.projectList.length > 0) {
|
||||
// const firstProjectPosition = new BMapGL.Point(
|
||||
// this.projectList[0].longitude,
|
||||
// this.projectList[0].latitude
|
||||
// )
|
||||
// this.map.setCenter(firstProjectPosition)
|
||||
// this.map.setZoom(13) // 你可以根据需要调整缩放级别
|
||||
// }
|
||||
}
|
||||
},
|
||||
// 获取工程和设备的标点等信息
|
||||
|
|
@ -197,9 +235,12 @@ export default {
|
|||
|
||||
<style>
|
||||
.my-info-window {
|
||||
margin: 15px;
|
||||
margin: 5px;
|
||||
width: 420px;
|
||||
}
|
||||
.my-info-windowPro {
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
.my-info-window-title {
|
||||
margin: 0;
|
||||
|
|
|
|||
15
src/main.js
15
src/main.js
|
|
@ -7,6 +7,21 @@ import store from './store'
|
|||
import ElementUI from 'element-ui';
|
||||
import 'element-ui/lib/theme-chalk/index.css';
|
||||
import { Message } from 'element-ui';
|
||||
import { fullScreenContainer, borderBox1, borderBox2, borderBox3, borderBox4, borderBox5, borderBox7, borderBox8, borderBox11, decoration6, decoration3 } from '@jiaminghi/data-view'
|
||||
|
||||
|
||||
Vue.use(borderBox1)
|
||||
Vue.use(borderBox2)
|
||||
Vue.use(borderBox3)
|
||||
Vue.use(borderBox4)
|
||||
Vue.use(borderBox5)
|
||||
Vue.use(borderBox7)
|
||||
Vue.use(borderBox8)
|
||||
Vue.use(borderBox11)
|
||||
Vue.use(borderBox8)
|
||||
Vue.use(decoration3)
|
||||
Vue.use(decoration6)
|
||||
Vue.use(fullScreenContainer)
|
||||
|
||||
Vue.prototype.$eventBus = new Vue()
|
||||
Vue.config.productionTip = false;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div class="homePage">
|
||||
<div class="homePage" >
|
||||
<!-- <div class="homePage_title" @click="routerClick">
|
||||
<div>智慧仓储管理平台</div>
|
||||
</div> -->
|
||||
|
|
|
|||
|
|
@ -0,0 +1,525 @@
|
|||
<template>
|
||||
<div class="drawer-container">
|
||||
<div class="drawer-left">
|
||||
<h1 class="title-content">{{ queryParams.typeModelName }}</h1>
|
||||
<ul class="info-list">
|
||||
<li>
|
||||
<span>机具设备编码：{{ queryParams.maCode }}</span>
|
||||
<span>{{ queryParams.maStatus }}</span>
|
||||
</li>
|
||||
<li>领用工程：{{ queryParams.projectName }} <span></span></li>
|
||||
<li>定位设备编号：{{ queryParams.iotId }}<span></span></li>
|
||||
</ul>
|
||||
<div class="date-select">
|
||||
<el-radio-group v-model="radio" @change="onChangeRadio" ref="radio">
|
||||
<el-radio :label="1">当天</el-radio>
|
||||
<el-radio :label="2">本月</el-radio>
|
||||
</el-radio-group>
|
||||
|
||||
<el-date-picker
|
||||
v-model="queryForm.date"
|
||||
type="datetimerange"
|
||||
range-separator="至"
|
||||
start-placeholder="请选择开始日期"
|
||||
end-placeholder="请选择结束日期"
|
||||
value-format="yyyy-MM-dd HH:mm:ss"
|
||||
@change="onChangeTime"
|
||||
style="margin-left: 5px"
|
||||
>
|
||||
</el-date-picker>
|
||||
</div>
|
||||
|
||||
<div class="btn-select">
|
||||
<div
|
||||
v-for="(item, index) in checkBtnList"
|
||||
:key="index"
|
||||
:class="{ active: activeIndex === index }"
|
||||
@click="handleCheck(index)"
|
||||
>
|
||||
{{ item.title }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="location-list" v-loading="loading">
|
||||
<template v-if="activeIndex === 0">
|
||||
<template v-if="tripList.length > 0">
|
||||
<div
|
||||
v-for="(item, index) in tripList"
|
||||
:key="index"
|
||||
@click="handleTrip(item, index)"
|
||||
class="trip-container"
|
||||
:class="{ activeIndex: activeIndexTrip === index }"
|
||||
>
|
||||
<!-- <div>里程：10KM</div>
|
||||
<div>时长：30分种</div> -->
|
||||
<div class="location-start">
|
||||
<img src="../../../assets/img/start.png" alt="" />
|
||||
<span>
|
||||
{{ item.startTime }}
|
||||
</span>
|
||||
<div>
|
||||
{{ item.startAddress }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="location-start">
|
||||
<img src="../../../assets/img/end.png" alt="" />
|
||||
<span>
|
||||
{{ item.endTime }}
|
||||
</span>
|
||||
<div>{{ item.endAddress }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
{{ loading ? '数据加载中...' : '暂无数据...' }}
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<template v-else>
|
||||
<template v-if="parkList.length > 0">
|
||||
<div
|
||||
v-for="(item, index) in parkList"
|
||||
:key="index"
|
||||
class="trip-container"
|
||||
>
|
||||
<div class="location-start">
|
||||
<span>{{ item.startTime }}</span>
|
||||
<span>{{ item.hours }}时{{ item.mints }}分</span>
|
||||
</div>
|
||||
<div>{{ item.address }}</div>
|
||||
</div>
|
||||
</template>
|
||||
<template v-else>
|
||||
{{ loading ? '数据加载中...' : '暂无数据...' }}
|
||||
</template>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="drawer-right">
|
||||
<div id="drawer-map-container"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getIotDeviceTripApi, getIotDeviceParkDetailApi } from '@/api/screen.js'
|
||||
import moment from 'moment'
|
||||
export default {
|
||||
props: {
|
||||
queryParams: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
radio: 1,
|
||||
value1: [],
|
||||
map: null,
|
||||
trackAni: null,
|
||||
loading: false,
|
||||
checkBtnList: [{ title: '行程' }, { title: '停留点' }],
|
||||
activeIndex: 0,
|
||||
activeIndexTrip: null,
|
||||
// 查询设备行程信息的参数
|
||||
tripParams: {
|
||||
// beginTime: moment().subtract(1, 'days').format('YYYY-MM-DD HH:mm:ss'),
|
||||
beginTime: moment().startOf('day').format('YYYY-MM-DD HH:mm:ss'),
|
||||
endTime: moment().format('YYYY-MM-DD HH:mm:ss'),
|
||||
iotId: '',
|
||||
},
|
||||
queryForm: {
|
||||
date: [
|
||||
moment().startOf('day').format('YYYY-MM-DD HH:mm:ss'),
|
||||
moment().format('YYYY-MM-DD HH:mm:ss'),
|
||||
],
|
||||
},
|
||||
// 行程信息
|
||||
tripList: [],
|
||||
// 停留点信息
|
||||
parkList: [],
|
||||
// 轨迹点
|
||||
linePointList: [
|
||||
{
|
||||
lng: '',
|
||||
lat: '',
|
||||
},
|
||||
{
|
||||
lng: '',
|
||||
lat: '',
|
||||
},
|
||||
],
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.$refs.radio.$children.forEach((item) => {
|
||||
item.$refs.radio.removeAttribute('aria-hidden')
|
||||
})
|
||||
console.log(this.queryParams, '参数---')
|
||||
this.getIotDeviceTripData()
|
||||
this.initMap()
|
||||
},
|
||||
beforeDestroy() {
|
||||
// 1. 判断轨迹实例是否存在 如果存在 先强制关闭动画，否则页面报错
|
||||
if (this.trackAni) {
|
||||
this.trackAni.cancel()
|
||||
}
|
||||
// 2. 清除地图上面的标点覆盖物 并清除地图实例
|
||||
|
||||
if (this.map) {
|
||||
this.map.clearOverlays()
|
||||
this.map.destroy()
|
||||
this.map = null
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
initMap() {
|
||||
this.$nextTick(() => {
|
||||
this.map = new BMapGL.Map('drawer-map-container') // 创建地图实例
|
||||
let point = new BMapGL.Point(
|
||||
this.queryParams.iotLocationVo.callon,
|
||||
this.queryParams.iotLocationVo.callat
|
||||
) // 创建点坐标
|
||||
// let point = new BMapGL.Point(this.calLon, this.calLat) // 创建点坐标
|
||||
this.map.centerAndZoom(point, 15) // 初始化地图，设置中心点坐标和地图级别
|
||||
this.map.enableScrollWheelZoom(true) // 启用滚轮放大缩小
|
||||
this.map.setHeading(64.5) //设置地图旋转角度
|
||||
this.map.setTilt(73) //设置地图的倾斜角度
|
||||
|
||||
var icon = new BMapGL.Icon(
|
||||
require('../../../assets/img/location-icon.png'),
|
||||
new BMapGL.Size(30, 42),
|
||||
{
|
||||
anchor: new BMapGL.Size(3, 10),
|
||||
}
|
||||
)
|
||||
|
||||
let marker = new BMapGL.Marker(point, { icon }) // 创建标点
|
||||
this.map.addOverlay(marker)
|
||||
})
|
||||
},
|
||||
/** 筛选停留点和行程 */
|
||||
handleCheck(index) {
|
||||
this.activeIndex = index
|
||||
},
|
||||
/** 获取行程信息和停六点信息 */
|
||||
async getIotDeviceTripData() {
|
||||
if (!this.queryForm.date) {
|
||||
this.$message.error('请选择时间范围！')
|
||||
return
|
||||
}
|
||||
|
||||
this.tripParams.iotId = this.queryParams.iotId
|
||||
this.tripParams.beginTime = this.queryForm.date[0]
|
||||
this.tripParams.endTime = this.queryForm.date[1]
|
||||
this.loading = true
|
||||
const res = await getIotDeviceTripApi(this.tripParams)
|
||||
const resS = await getIotDeviceParkDetailApi(this.tripParams)
|
||||
this.loading = false
|
||||
|
||||
this.parkList = resS.data
|
||||
this.parkList.forEach((e) => {
|
||||
e.startTime = moment(parseInt(e.beginTime)).format(
|
||||
'YYYY-MM-DD HH:mm:ss'
|
||||
)
|
||||
|
||||
e.hours = parseInt(
|
||||
(parseInt(e.endTime) - parseInt(e.beginTime)) / 1000 / 60 / 60
|
||||
)
|
||||
e.mints = parseInt(
|
||||
((parseInt(e.endTime) - parseInt(e.beginTime)) / 1000 / 60) % 60
|
||||
)
|
||||
})
|
||||
let tripInfo = JSON.parse(res.msg)
|
||||
|
||||
let addressList = []
|
||||
if (tripInfo.addressmap) {
|
||||
addressList = Object.keys(tripInfo.addressmap)
|
||||
}
|
||||
|
||||
tripInfo.totaltrips.forEach((e) => {
|
||||
e.startTime = moment(e.trackstarttime).format('YYYY-MM-DD HH:mm:ss')
|
||||
e.endTime = moment(e.trackendtime).format('YYYY-MM-DD HH:mm:ss')
|
||||
|
||||
e.drivingDuration = parseInt((e.trackendtime - e.trackstarttime) / 1000)
|
||||
|
||||
addressList.forEach((v) => {
|
||||
if (v.indexOf(e.slat.toString().slice(0, 7)) > -1) {
|
||||
e.startAddress = tripInfo.addressmap[v]
|
||||
}
|
||||
if (v.indexOf(e.elat.toString().slice(0, 7)) > -1) {
|
||||
e.endAddress = tripInfo.addressmap[v]
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
this.tripList = tripInfo.totaltrips
|
||||
|
||||
console.log(this.parkList, '停留点信息', this.tripList, '行程信息')
|
||||
},
|
||||
/** 时间选择器 */
|
||||
onChangeTime(val) {
|
||||
if (val) {
|
||||
this.tripParams.beginTime = val[0]
|
||||
this.tripParams.endTime = val[1]
|
||||
}
|
||||
|
||||
this.radio = null
|
||||
this.getIotDeviceTripData()
|
||||
},
|
||||
|
||||
/** 单选框change事件 */
|
||||
onChangeRadio(val) {
|
||||
if (val == 1) {
|
||||
this.queryForm.date = [
|
||||
moment().startOf('day').format('YYYY-MM-DD HH:mm:ss'),
|
||||
moment().format('YYYY-MM-DD HH:mm:ss'),
|
||||
]
|
||||
}
|
||||
if (val == 2) {
|
||||
this.queryForm.date = [
|
||||
moment().startOf('month').format('YYYY-MM-DD HH:mm:ss'),
|
||||
moment().format('YYYY-MM-DD HH:mm:ss'),
|
||||
]
|
||||
}
|
||||
this.getIotDeviceTripData()
|
||||
},
|
||||
/** 点击查看行程 */
|
||||
handleTrip(item, index) {
|
||||
if (this.trackAni) {
|
||||
this.trackAni.cancel()
|
||||
}
|
||||
this.activeIndexTrip = index
|
||||
this.map.clearOverlays()
|
||||
let pointList = []
|
||||
this.linePointList[0].lng = item.slon
|
||||
this.linePointList[0].lat = item.slat
|
||||
this.linePointList[1].lng = item.elon
|
||||
this.linePointList[1].lat = item.elat
|
||||
if (this.linePointList.length === 0) return
|
||||
for (var i = 0; i < this.linePointList.length; i++) {
|
||||
pointList.push(
|
||||
new BMapGL.Point(this.linePointList[i].lng, this.linePointList[i].lat)
|
||||
)
|
||||
}
|
||||
|
||||
// pointList.push(new BMapGL.Point(item.slon, item.slat))
|
||||
// pointList.push(new BMapGL.Point(item.elon, item.elat))
|
||||
let polyline = new BMapGL.Polyline(pointList)
|
||||
// 修改线的样式
|
||||
polyline.setStrokeColor('#EA3323') // 线颜色 #EA3323
|
||||
// polyline.setStrokeWeight(2) // 线宽
|
||||
this.trackAni = new BMapGLLib.TrackAnimation(this.map, polyline, {
|
||||
overallView: true, // 动画完成后自动调整视野到总览
|
||||
tilt: 55, // 轨迹播放的角度，默认为55
|
||||
duration: 800, // 动画持续时长，默认为10000，单位ms
|
||||
delay: 500, // 动画开始的延迟，默认0，单位ms
|
||||
})
|
||||
this.trackAni.start()
|
||||
// 设置起点终点图标
|
||||
this.triggerMovement()
|
||||
},
|
||||
// 轨迹运动结束后的回调
|
||||
triggerMovement() {
|
||||
// 轨迹运动结束后获取起点和终点的经纬度坐标
|
||||
let startLatLng = new BMapGL.Point(
|
||||
this.linePointList[0].lng,
|
||||
this.linePointList[0].lat
|
||||
)
|
||||
let endLatLng = new BMapGL.Point(
|
||||
this.linePointList[this.linePointList.length - 1].lng,
|
||||
this.linePointList[this.linePointList.length - 1].lat
|
||||
)
|
||||
|
||||
// 添加起点和终点的图标
|
||||
this.addStartEndMarkers(startLatLng, endLatLng)
|
||||
},
|
||||
// 添加起点和终点的标记
|
||||
addStartEndMarkers(startLatLng, endLatLng) {
|
||||
let startIcon = new BMapGL.Icon(
|
||||
require('@/assets/img/startIcon.png'),
|
||||
new BMapGL.Size(32, 32)
|
||||
)
|
||||
let startMarker = new BMapGL.Marker(startLatLng, {
|
||||
icon: startIcon,
|
||||
})
|
||||
this.map.addOverlay(startMarker)
|
||||
|
||||
let endIcon = new BMapGL.Icon(
|
||||
require('@/assets/img/endIcon.png'),
|
||||
new BMapGL.Size(32, 32)
|
||||
)
|
||||
let endMarker = new BMapGL.Marker(endLatLng, { icon: endIcon })
|
||||
this.map.addOverlay(endMarker)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
// 抽屉样式
|
||||
.drawer-container {
|
||||
// position: relative;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
padding: 15px;
|
||||
display: flex;
|
||||
border: 1px solid #46b4ea;
|
||||
box-shadow: 0 0 2px #46b4ea;
|
||||
|
||||
.drawer-left {
|
||||
width: 30%;
|
||||
padding: 0 8px;
|
||||
border-right: 1px dashed #0098ee;
|
||||
color: #fff;
|
||||
background-color: #030c3c;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
ul li {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.info-list {
|
||||
padding-top: 10px;
|
||||
border-top: 1px solid #0362a9;
|
||||
li {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
/deep/.el-radio__label {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.date-select {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
/deep/.el-input__inner {
|
||||
// width: 200px;
|
||||
margin-right: 6px;
|
||||
background-color: #07154a;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/deep/ .el-range-editor .el-range-input {
|
||||
background: transparent;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.btn-select {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin: 8px 0;
|
||||
|
||||
div {
|
||||
margin-right: 8px;
|
||||
text-align: center;
|
||||
width: 96px;
|
||||
height: 44px;
|
||||
line-height: 44px;
|
||||
cursor: pointer;
|
||||
background: url('../../../assets/img/myImage/no_active.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.active {
|
||||
background: url('../../../assets/img/myImage/active.png') no-repeat;
|
||||
}
|
||||
}
|
||||
|
||||
.location-list {
|
||||
flex: 1;
|
||||
overflow: auto;
|
||||
.trip-container {
|
||||
margin-bottom: 8px;
|
||||
padding: 15px 10px;
|
||||
border: 1px solid #035ea6;
|
||||
cursor: pointer;
|
||||
}
|
||||
div {
|
||||
// padding: 6px 0;
|
||||
}
|
||||
|
||||
.activeIndex {
|
||||
background-color: #3d4883;
|
||||
}
|
||||
|
||||
.location-start {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
|
||||
img {
|
||||
vertical-align: middle;
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
span {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
div {
|
||||
flex: 1;
|
||||
word-break: break-all;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.drawer-right {
|
||||
flex: 1;
|
||||
padding-left: 6px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
rgba(11, 20, 71, 1) 0%,
|
||||
rgba(11, 20, 71, 0.9) 32%,
|
||||
rgba(11, 20, 70, 0.5) 70%,
|
||||
rgba(11, 20, 71, 0.1) 100%
|
||||
);
|
||||
|
||||
#drawer-map-container {
|
||||
width: 100%;
|
||||
height: 70%;
|
||||
}
|
||||
}
|
||||
}
|
||||
/deep/ .el-radio-button__inner,
|
||||
.el-radio-group {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
//定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸
|
||||
*::-webkit-scrollbar {
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
}
|
||||
|
||||
//定义滑块 内阴影+圆角
|
||||
*::-webkit-scrollbar-thumb {
|
||||
border-radius: 1em;
|
||||
background-color: rgba(230, 237, 248, 0.3);
|
||||
}
|
||||
|
||||
//定义滚动条轨道 内阴影+圆角
|
||||
*::-webkit-scrollbar-track {
|
||||
border-radius: 1em;
|
||||
background-color: rgba(230, 237, 248, 0.1);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,488 @@
|
|||
<template>
|
||||
<div class="drawer-container">
|
||||
<div class="drawer-left">
|
||||
<h1 class="title-content">{{ queryParams.lotName || '' }}</h1>
|
||||
<h4 class="address-content">{{ queryParams.address || '' }}</h4>
|
||||
<h4 class="user-device">在用设备</h4>
|
||||
<ul>
|
||||
<li class="user-num">
|
||||
<span>{{ useNumJj }}</span>
|
||||
<img src="../../../assets/img/device.png" />
|
||||
<span>机具设备</span>
|
||||
</li>
|
||||
<li class="user-num">
|
||||
<span>{{ useNumTs }}</span>
|
||||
<img src="../../../assets/img/device.png" />
|
||||
<span>调试设备</span>
|
||||
</li>
|
||||
</ul>
|
||||
<h4 class="record-title">领料记录</h4>
|
||||
<ul class="device-list">
|
||||
<li v-for="(item, index) in applyList" :key="index">
|
||||
<span>{{ item.createTime.split(' ')[0] }}</span>
|
||||
<span>{{ item.createTime.split(' ')[1] }}</span>
|
||||
<span>{{ item.typeModelName }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
<h4 class="record-title">退料记录</h4>
|
||||
|
||||
<ul class="device-list">
|
||||
<li v-for="(item, index) in returnList" :key="index">
|
||||
<span>{{ item.createTime.split(' ')[0] }}</span>
|
||||
<span>{{ item.createTime.split(' ')[1] }}</span>
|
||||
<span>{{ item.typeModelName }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div class="drawer-right">
|
||||
<el-row style="padding-top: 8px">
|
||||
<el-form inline :model="formParams" ref="formParamsRef">
|
||||
<el-form-item prop="code">
|
||||
<el-input
|
||||
v-model="formParams.code"
|
||||
placeholder="请输入领料单号"
|
||||
clearable
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="" prop="unitId">
|
||||
<el-select
|
||||
:popper-append-to-body="false"
|
||||
v-model="formParams.unitId"
|
||||
placeholder="请选择单位"
|
||||
style="width: 100%"
|
||||
clearable
|
||||
>
|
||||
<el-option
|
||||
v-for="item in uniList"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="" prop="companyId">
|
||||
<el-select
|
||||
:popper-append-to-body="false"
|
||||
placeholder="请选择设备类型"
|
||||
v-model="formParams.companyId"
|
||||
style="width: 100%"
|
||||
clearable
|
||||
>
|
||||
<el-option label="机具设备" :value="101" />
|
||||
<el-option label="调试设备" :value="102" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="handleQuery">查询</el-button>
|
||||
<el-button @click="handleReset">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-row>
|
||||
|
||||
<el-table :data="tableData">
|
||||
<el-table-column
|
||||
prop="createTime"
|
||||
align="center"
|
||||
label="出库时间"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="typeName"
|
||||
align="center"
|
||||
label="设备类型"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="typeModelName"
|
||||
align="center"
|
||||
label="规格型号"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="preNum"
|
||||
align="center"
|
||||
label="出库数量"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="typeKeepName"
|
||||
align="center"
|
||||
label="设备负责人"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="code"
|
||||
align="center"
|
||||
label="领料单号"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="unitName"
|
||||
align="center"
|
||||
label="领料申请单位"
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
prop="proName"
|
||||
align="center"
|
||||
label="领料申请工程"
|
||||
></el-table-column>
|
||||
</el-table>
|
||||
|
||||
<!-- <Pagination
|
||||
:total="total"
|
||||
:page.sync="formParams.pageNum"
|
||||
:limit.sync="formParams.pageSize"
|
||||
@pagination="getList"
|
||||
/> -->
|
||||
|
||||
<!-- <el-pagination
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
:current-page="formParams.pageNum"
|
||||
:page-sizes="[100, 200, 300, 400]"
|
||||
:page-size="100"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
:total="400"
|
||||
popper-class="‘select_bottom’"
|
||||
>
|
||||
</el-pagination> -->
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
getProjectOutApi,
|
||||
getUnitListApi,
|
||||
getProjectReturnApi,
|
||||
getProjectDeviceNumApi,
|
||||
} from '@/api/screen.js'
|
||||
import Pagination from '@/components/Pagination/index'
|
||||
export default {
|
||||
components: {
|
||||
Pagination,
|
||||
},
|
||||
props: {
|
||||
queryParams: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tableData: [{ demo: '999' }],
|
||||
formParams: {
|
||||
companyId: '',
|
||||
code: '',
|
||||
unitId: '',
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
lotId: '',
|
||||
},
|
||||
uniList: [],
|
||||
applyList: [],
|
||||
returnList: [],
|
||||
useNumJj: 0,
|
||||
useNumTs: 0,
|
||||
total: 0,
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getList()
|
||||
this.getProjectOutData()
|
||||
this.getUnitListData()
|
||||
},
|
||||
methods: {
|
||||
async getProjectOutData() {
|
||||
console.log(this.queryParams, 'this.queryParams')
|
||||
if (this.queryParams && this.queryParams.lotId) {
|
||||
const res = await getProjectOutApi({ lotId: this.queryParams.lotId })
|
||||
const resS = await getProjectReturnApi({
|
||||
lotId: this.queryParams.lotId,
|
||||
})
|
||||
const resSs = await getProjectDeviceNumApi({
|
||||
lotId: this.queryParams.lotId,
|
||||
})
|
||||
|
||||
this.applyList = res.data.rows
|
||||
this.returnList = resS.data.rows
|
||||
this.useNumJj = resSs.data.useNumJj
|
||||
this.useNumTs = resSs.data.useNumTs
|
||||
}
|
||||
},
|
||||
/** 获取单位数据 */
|
||||
async getUnitListData() {
|
||||
const { data: res } = await getUnitListApi({})
|
||||
this.uniList = res
|
||||
},
|
||||
/** 获取列表数据 */
|
||||
async getList() {
|
||||
this.formParams.lotId = this.queryParams.lotId
|
||||
const res = await getProjectOutApi(this.formParams)
|
||||
this.total = res.data.total
|
||||
this.tableData = res.data.rows
|
||||
},
|
||||
/** 查询按钮 */
|
||||
handleQuery() {
|
||||
this.getList()
|
||||
},
|
||||
/** 重置按钮 */
|
||||
handleReset() {
|
||||
this.$refs.formParamsRef.resetFields()
|
||||
this.getList()
|
||||
},
|
||||
handleSizeChange() {},
|
||||
handleCurrentChange() {},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
// 抽屉样式
|
||||
.drawer-container {
|
||||
// position: relative;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
padding: 15px;
|
||||
display: flex;
|
||||
border: 1px solid #46b4ea;
|
||||
box-shadow: 0 0 2px #46b4ea;
|
||||
|
||||
.drawer-left {
|
||||
width: 30%;
|
||||
padding: 0 8px;
|
||||
border-right: 1px dashed #0098ee;
|
||||
color: #fff;
|
||||
background-color: #030c3c;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
h4 {
|
||||
font-weight: normal;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
.title-content {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 38px;
|
||||
line-height: 38px;
|
||||
letter-spacing: 3px;
|
||||
font-size: 18px;
|
||||
background: url('../../../assets/img/title-bg.png') no-repeat;
|
||||
background-size: 100%, 100%;
|
||||
}
|
||||
|
||||
.address-content {
|
||||
margin: 5px 0;
|
||||
|
||||
font-size: 14px;
|
||||
letter-spacing: 4px;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.user-device {
|
||||
margin: 20px 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
ul {
|
||||
margin-bottom: 30px;
|
||||
list-style: none;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
|
||||
.user-num {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
font-size: 18px !important;
|
||||
}
|
||||
|
||||
.user-num span:first-child {
|
||||
font-size: 16px;
|
||||
font-weight: bold;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
.record-title {
|
||||
margin: 10px 0;
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.device-list {
|
||||
list-style: none;
|
||||
flex: 1;
|
||||
margin: 20px 0 0 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow-y: auto;
|
||||
|
||||
li {
|
||||
margin-bottom: 8px;
|
||||
padding: 0 8px;
|
||||
height: 38px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border: 1px solid #035ea6;
|
||||
|
||||
span {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
li span:nth-child(1) {
|
||||
width: 25%;
|
||||
}
|
||||
li span:nth-child(2) {
|
||||
width: 15%;
|
||||
}
|
||||
|
||||
li span:last-child {
|
||||
width: 60%;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.drawer-right {
|
||||
// flex: 1;
|
||||
width: 70%;
|
||||
padding-left: 6px;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
rgba(11, 20, 71, 1) 0%,
|
||||
rgba(11, 20, 71, 0.9) 32%,
|
||||
rgba(11, 20, 70, 0.5) 70%,
|
||||
rgba(11, 20, 71, 0.1) 100%
|
||||
);
|
||||
/deep/ .el-input__inner {
|
||||
// margin-right: 6px;
|
||||
background-color: #07154a;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/deep/ .el-table th {
|
||||
// #253855 #30619B 背景色从上到下渐变
|
||||
background: linear-gradient(to bottom, #2b313d, #3267a7) !important;
|
||||
color: #fff !important;
|
||||
border-bottom: 1px solid #84fcfd !important;
|
||||
}
|
||||
/deep/ .el-table tr {
|
||||
background-color: #335684 !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
/deep/ .el-table--striped .el-table__body tr.el-table__row--striped td {
|
||||
background-color: #25447d !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
/deep/ .el-table td,
|
||||
.building-top .el-table th.is-leaf {
|
||||
border-bottom: 1px solid #6983a5 !important;
|
||||
}
|
||||
/deep/ .el-table::before {
|
||||
border-bottom: 1px solid #6983a5 !important;
|
||||
background-color: #6983a5 !important;
|
||||
height: 1px !important;
|
||||
}
|
||||
/deep/ .el-table--enable-row-hover .el-table__body tr:hover > td {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
/deep/ .el-select-dropdown {
|
||||
position: absolute !important;
|
||||
left: 0 !important;
|
||||
}
|
||||
|
||||
/deep/ .el-pagination__sizes {
|
||||
position: relative;
|
||||
}
|
||||
// /deep/ .pagination-container .el-select-dropdown {
|
||||
// position: absolute !important;
|
||||
// left: 0 !important;
|
||||
// }
|
||||
/deep/ .el-pagination__sizes .el-input .el-input__inner {
|
||||
color: #e3e4e7 !important;
|
||||
border: 1px solid #e3e4e7 !important;
|
||||
background-color: transparent;
|
||||
}
|
||||
/deep/ .el-pagination__editor.el-input .el-input__inner {
|
||||
color: #e3e4e7 !important;
|
||||
border: 1px solid #e3e4e7 !important;
|
||||
background-color: transparent;
|
||||
}
|
||||
/deep/ .el-pagination.is-background .btn-prev,
|
||||
.el-pagination.is-background .el-pager li {
|
||||
color: #e3e4e7 !important;
|
||||
border: 1px solid #e3e4e7 !important;
|
||||
background-color: transparent !important;
|
||||
}
|
||||
/deep/ .el-pagination.is-background .btn-next {
|
||||
color: #e3e4e7 !important;
|
||||
border: 1px solid #e3e4e7 !important;
|
||||
background-color: transparent !important;
|
||||
}
|
||||
/deep/ .el-pagination.is-background .el-pager li:not(.disabled).active {
|
||||
background-color: #00a5ff !important;
|
||||
color: #000 !important;
|
||||
}
|
||||
/deep/ .el-button--primary {
|
||||
background-color: #84fcfd !important;
|
||||
border: #84fcfd !important;
|
||||
color: #285050 !important;
|
||||
}
|
||||
/deep/ .el-button--default {
|
||||
background-color: transparent !important;
|
||||
border: 1px solid #84fcfd !important;
|
||||
color: #d5d6da !important;
|
||||
}
|
||||
/deep/ .el-table__empty-block {
|
||||
background-color: #335684 !important;
|
||||
.el-table__empty-text {
|
||||
color: #fff !important;
|
||||
}
|
||||
}
|
||||
/deep/ .el-pagination__total {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
// /deep/ .select_bottom {
|
||||
// z-index: 2008;
|
||||
// position: absolute;
|
||||
// // left: 147px !important;
|
||||
// // top: 355px !important;
|
||||
// margin: 0px;
|
||||
// border: 1px solid #55aaff;
|
||||
// .el-select-dropdown {
|
||||
// }
|
||||
// .el-select-dropdown {
|
||||
// background-color: #ffffff;
|
||||
// }
|
||||
// .el-select-dropdown__item.selected {
|
||||
// color: red;
|
||||
// }
|
||||
|
||||
// .el-select-dropdown__item.hover,
|
||||
// .el-select-dropdown__item:hover {
|
||||
// background: red;
|
||||
// color: #fff;
|
||||
// }
|
||||
// }
|
||||
|
||||
//定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸
|
||||
*::-webkit-scrollbar {
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
}
|
||||
|
||||
//定义滑块 内阴影+圆角
|
||||
*::-webkit-scrollbar-thumb {
|
||||
border-radius: 1em;
|
||||
background-color: rgba(230, 237, 248, 0.3);
|
||||
}
|
||||
|
||||
//定义滚动条轨道 内阴影+圆角
|
||||
*::-webkit-scrollbar-track {
|
||||
border-radius: 1em;
|
||||
background-color: rgba(230, 237, 248, 0.1);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -205,7 +205,7 @@ export default {
|
|||
methods: {
|
||||
openDrawer(query) {
|
||||
this.queryParams = query
|
||||
// console.log(query, 'c参数')
|
||||
console.log(query, 'c参数')
|
||||
this.drawerType = query.type
|
||||
this.drawer = true
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in New Issue