大屏二级工程信息带出

package.json

@@ -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",

src/components/home/new-map.vue

@@ -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) {
+          if (points[i].type === 1) {
-            // infoWindow.open(this.map, marker)
+            console.log('project--',points[i])
-            // infoWindow.setPosition(marker.getPosition())
+            // let opts = {
-            // this.map.openInfoWindow(infoWindow, this.map.getCenter())
+            //   width: 320, // 信息窗口宽度
-            console.log(e, '地图点击了--')
+            //   height: 280, // 信息窗口高度
-            _this.$emit('openDrawer', e.target.data)
+            //   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;

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;

src/views/Home/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="homePage">
+  <div class="homePage" >
     <!-- <div class="homePage_title" @click="routerClick">
       <div>智慧仓储管理平台</div>
     </div> -->

src/views/newHome/components/drawer-device.vue

@@ -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>

src/views/newHome/components/drawer-project.vue

@@ -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>

src/views/newHome/index.vue

@@ -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
     },