1、监测因子趋势时间控件修改 2、监测因子对比echarts显示修改

yupan

2022-11-07 9af0ba7e5a51b187f762234755ed1559ab91f5f5

 src/components/Wind/Map.vue

@@ -11,7 +11,7 @@
        v-for="(item, index) in params"
        :key="index"
        class="left"
        :class="{ click: changeColor == index }"
        :class="{ click: changeColor === index }"
        @click="change(index)"
      >{{ item }}</span>
      <!-- <span class="middle" @click="toggleWindState()">{{ windStateText }}</span> -->
@@ -22,8 +22,179 @@
        <img class="drop-icon" :src="turnImg" alt="" @click="turnState">
      </span>
    </div>
    <div class="topDate" style="height: 60px">
      <div class="jdt" id="eventPro">
        <div class="mouseDiv">
          <span class="inText"></span>
          <div class="sjDiv"></div>
        </div>
        <div class="mouseDiv2">
          <span class="inText2"></span>
          <div class="sjDiv2"></div>
        </div>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
      </div>
      <div class="timeDiv" style="position: relative">
        <ul id="timeUl">
          <li style="width: 0.83%"></li>
          <li></li>
          <li></li>
          <li>03</li>
          <li></li>
          <li></li>
          <li>06</li>
          <li></li>
          <li></li>
          <li>09</li>
          <li></li>
          <li></li>
          <li>12</li>
          <li></li>
          <li></li>
          <li>15</li>
          <li></li>
          <li></li>
          <li>18</li>
          <li></li>
          <li></li>
          <li>21</li>
          <li></li>
          <li></li>
          <li></li>
          <!--          -->
          <li></li>
          <li></li>
          <li>03</li>
          <li></li>
          <li></li>
          <li>06</li>
          <li></li>
          <li></li>
          <li>09</li>
          <li></li>
          <li></li>
          <li>12</li>
          <li></li>
          <li></li>
          <li>15</li>
          <li></li>
          <li></li>
          <li>18</li>
          <li></li>
          <li></li>
          <li>21</li>
          <li></li>
          <li></li>
          <li></li>
          <!--          -->
          <li></li>
          <li></li>
          <li>03</li>
          <li></li>
          <li></li>
          <li>06</li>
          <li></li>
          <li></li>
          <li>09</li>
          <li></li>
          <li></li>
          <li>12</li>
          <li></li>
          <li></li>
          <li>15</li>
          <li></li>
          <li></li>
          <li>18</li>
          <li></li>
          <li></li>
          <li>21</li>
          <li></li>
          <li></li>
        </ul>
        <div style="display: flex;width: 100%; border-top: 1px solid rgba(255,255,255,0.5)" class="dayDiv">
          <p class="p1"></p>
          <p style="position: relative">
            <span class="borderLine" style="position: absolute; left: 0; border-left: 1px solid rgba(255,255,255,1); height: 47px; bottom: 0"></span>
            <span class="p2"></span>
            <span class="borderLine" style="position: absolute;right: 0; border-right: 1px solid rgba(255,255,255,1); height: 47px; bottom: 0"></span>
          </p>
          <p class="p3"></p>
        </div>
      </div>
    </div>
    <regional-overview :key="timerKey" :map="map" :show-flag="showOrHidden" />
    <div :style="{ background: 'url(' + bg + ')' }" class="buttom-left" />
    <div :style="{ background: 'url(' + bg + ') no-repeat' }" class="buttom-left" />
    <el-dialog
      title="污染报警查询"
      :visible.sync="alarmTableVisible"
@@ -233,7 +404,10 @@
      turnImg: require('@/assets/images/regionalOverview/dropDown.png'),
      showOrHidden: true,
      dateFormat: '',
      alarmTableVisible: false
      alarmTableVisible: false,
      chooseTimeInfo: false, // 是否选择了时间点
      dateInfo: '', // 选择的日期
      timeInfo: '' // 选择的时间
    }
  },
  computed: {
@@ -253,6 +427,9 @@
    this.$Bus.$on('alarmTableVisible', res => this.alarmTableVisible = res)
    // 初始化地图容器
    this.initMap()

    // 事件代理
    this.eventProxy()
  },
  created() {
    const newLL = this.bd09togcj02(this.jingduNew, this.weiduNew) // 百度经纬度转高德经纬度
@@ -283,6 +460,163 @@
    }
  },
  methods: {
    // 拿到某天的日期和星期
    getDayXQ(day) {
      var days = new Date().getDay() // 星期
      var rq = '' // 日期
      if (day === 'today') {
        rq = this.newData(0)
      } else if (day === 'yesterday') {
        days = ((days + 7) - 1) % 7
        rq = this.newData(-1) // 昨天日期
      } else if (day === 'beforeYea') {
        days = ((days + 7) - 2) % 7
        rq = this.newData(-2) // 前天日期
      }
      switch (days) {
        case 1:
          days = '周一'
          break
        case 2:
          days = '周二'
          break
        case 3:
          days = '周三'
          break
        case 4:
          days = '周四'
          break
        case 5:
          days = '周五'
          break
        case 6:
          days = '周六'
          break
        case 0:
          days = '周日'
          break
      }
      return `${rq}(${days})`
    },
    // 计算当前天之前或者之后的日期
    newData(day) {
      var today = new Date()
      var targetday_milliseconds = today.getTime() + 1000 * 60 * 60 * 24 * day;
      today.setTime(targetday_milliseconds)
      var tMonth = today.getMonth() + 1
      tMonth = tMonth < 10 ? '0' + tMonth : tMonth
      var tDate = today.getDate()
      tDate = tDate < 10 ? '0' + tDate : tDate
      return tMonth + '/' + tDate
    },
    // 事件代理
    eventProxy() {
      // 拿到今天的日期和星期
      var ul = document.querySelector('#eventPro')
      var lis = document.querySelectorAll('#eventPro>li')
      var timeUl = document.querySelector('#timeUl')
      var timeLis = document.querySelectorAll('#timeUl>li')
      var mouseDiv = document.querySelector('.mouseDiv')
      var mouseDiv2 = document.querySelector('.mouseDiv2')
      var inText = document.querySelector('.inText')
      var inText2 = document.querySelector('.inText2')
      var p1 = document.querySelector('.p1')
      var p2 = document.querySelector('.p2')
      var p3 = document.querySelector('.p3')
      p3.innerHTML = this.getDayXQ('today')
      p2.innerHTML = this.getDayXQ('yesterday')
      p1.innerHTML = this.getDayXQ('beforeYea')
      var greenInfo = 0
      ul.onclick = (e) => {
        // 给所有的li颜色设为初始值
        for (let i = 0; i < lis.length; i++) {
          lis[i].style.backgroundColor = 'rgba(0,0,0,0.3)'
        }
        var target = e.target
        if (target.tagName.toLowerCase() === 'li') {
          // var li = this.querySelectorAll('li')
          // var index = Array.prototype.indexOf.call(li, target)
          for (let i = 0; i < lis.length; i++) {
            lis[i].style.backgroundColor = 'green'
            if (lis[i] === target) {
              mouseDiv2.style.left = (1.36986 * (i - 1) + 0.68493) + '%'
              mouseDiv2.style.display = 'block'
              var times = (i - 0 + 1) % 24
              times = times > 9 ? times : '0' + times
              inText2.innerHTML = times + ':00'
              this.chooseTimeInfo = true // 选择时间点
              if (i / 24 < 1) {
                console.log(111)
              } else if (i / 24 <= 2 && i / 24 > 1) {
                console.log(222)
              } else {
                console.log(333)
              }
              break
            }
          }
        }
      }
      // timeUl绑定点击事件
      timeUl.onclick = e => {
        // 给所有的li颜色设为初始值
        var target = e.target
        if (target.tagName.toLowerCase() === 'li') {
          for (let i = 0; i < timeLis.length; i++) {
            if (timeLis[i] === target) {
              greenInfo = i
              mouseDiv2.style.left = (1.36986 * (i - 2) + 0.68493) + '%'
              mouseDiv2.style.display = 'block'
              var times = i % 24
              times = times > 9 ? times : '0' + times
              inText2.innerHTML = times + ':00'
              break
            }
          }
          if (greenInfo !== 0) {
            for (let i = 0; i < lis.length; i++) {
              if (i < greenInfo) {
                lis[i].style.backgroundColor = 'green'
              } else {
                lis[i].style.backgroundColor = 'rgba(0,0,0,0.3)'
              }
            }
          }
          // console.log('下边点击进来了', greenInfo, 'index')
        }
      }
      // 鼠标移入移出事件
      for (let i = 0; i < lis.length; i++) {
        lis[i].onmouseenter = function() {
          // console.log('mouseenter', i)
          mouseDiv.style.left = (1.36986 * (i - 1) + 0.68493) + '%'
          mouseDiv.style.display = 'block'
          var times = (i - 0 + 1) % 24
          times = times > 9 ? times : '0' + times
          inText.innerHTML = times + ':00'
          // console.log(mouseDiv)
        }
        lis[i].onmouseleave = function() {
          mouseDiv.style.display = 'none'
          // console.log('移出事件', i)
        }
      }
      for (let i = 0; i < timeLis.length; i++) {
        timeLis[i].onmouseenter = function() {
          // console.log('mouseenter', i)
          mouseDiv.style.left = (1.36986 * (i - 2) + 0.68493) + '%'
          mouseDiv.style.display = 'block'
          var times = i % 24
          times = times > 9 ? times : '0' + times
          inText.innerHTML = times + ':00'
          // console.log(mouseDiv)
        }
        timeLis[i].onmouseleave = function() {
          mouseDiv.style.display = 'none'
          // console.log('移出事件', i)
        }
      }
    },
    // 当前小时默认值
    currentHour() {
      const aData = new Date()
@@ -497,7 +831,7 @@
      var gg_lat = z * Math.sin(theta)
      return [gg_lat, gg_lng]
    },
    // 请求设备坐标
    // 请求设备坐标,当前的
    deviceMaker() {
      // 遍历所有图层
      if (this.map) {
@@ -521,97 +855,375 @@
        // console.log('五分钟设备数据')
        // console.log(data)
        that.loading = false
        var keyData = data.data.devices
        this.keyData = data.data.devices
        // 遍历国控站位置
        this.stateControlStation()
        var group = L.layerGroup().addTo(this.map)
        this.keys = []
        for (let i = 0; i < keyData.length; i++) {
          if (keyData[i].a34002) {
            this.keys.push(Math.floor(JSON.parse(keyData[i].a34002)))
          } else if (keyData[i].a34004) {
            this.keys.push(Math.floor(JSON.parse(keyData[i].a34004)))
          } else if (keyData[i].a21026) {
            this.keys.push(Math.floor(JSON.parse(keyData[i].a21026)))
          } else if (keyData[i].a21004) {
            this.keys.push(Math.floor(JSON.parse(keyData[i].a21004)))
          } else if (keyData[i].a21005) {
            this.keys.push(JSON.parse(keyData[i].a21005).toFixed(3))
          } else if (keyData[i].a05024) {
            this.keys.push(Math.floor(JSON.parse(keyData[i].a05024)))
          } else if (keyData[i].a99054) {
            this.keys.push(JSON.parse(keyData[i].a99054).toFixed(3))
          } else {
            // for (let j = 0; j < keyData.length; j++) {
            this.keys.push(JSON.parse('null'))
            // }
          }
          // console.log(this.keys)
          var lat = keyData[i].latitude
          this.lats[i] = keyData[i].latitude
          var lng = keyData[i].longitude
          this.lngs[i] = keyData[i].longitude

          var blueIcon = L.icon({
            iconUrl: require('@/assets/icon/ico' + keyData[i].state + '.png'),
            iconSize: [60, 60],
            iconAnchor: [13, 21],
            className: 'my-device'
          })
          // 添加标记到地图
          L.marker([lat, lng], {
            icon: blueIcon
          }).addTo(group)
          // console.log(JSON.parse(this.keys[i]))
          var myIcon = L.divIcon({
            html: this.keys[i],
            className: 'my-div-icon',
            iconSize: 30
          })
          var marker = L.marker([lat, lng], { icon: myIcon }).addTo(group)
          // 给标记添加鼠标移入事件，mouseover事件会冒泡
          var _this = this
          marker.on('mouseover', function(e) {
            this.noneData = false
            // $.getJSON('http://47.99.64.149:8080/historyFiveMinutely/queryPopDataByMac', { 'mac': keyData[i].mac }, (res) => {
            //   var data = JSON.stringify(res.data).replace(/,/g, `<br>`).replace(/{|}|"/g, '')
            //   // console.log(data)
            //   this.bindPopup(data).openPopup()
            // })
            _this.$request({
              url: '/historyFiveMinutely/queryPopDataByMac',
              method: 'get',
              params: {
                mac: keyData[i].mac
              }
            }).then((res) => {
              for (const key in res.data) {
                var tempDecimal = res.data[key].replace(/[^\d.]/g, '').split('.')[1]
                if (key !== '名称' && key !== '时间') {
                  // if (Number(tempDecimal) === 0) {
                  //   res.data[key] = parseInt(res.data[key]) + res.data[key].split(' ')[1]
                  // } else {
                  //   res.data[key] = Number(res.data[key].split(' ')[0]).toFixed(2) + res.data[key].split(' ')[1]
                  // }
                  var num = res.data[key].split(' ')[0]
                  res.data[key] = (num - 0).toFixed(3)
                }
              }
              var data = JSON.stringify(res.data).replace(/,/g, `<br>`).replace(/{|}|"/g, '')
              this.bindPopup(data).openPopup()
            }).catch((err) => {
              console.log(err)
            })
          })
          // 给标记点添加鼠标移出事件
          marker.on('mouseout', function(e) {
            this.noneData = false
            this.bindPopup().closePopup()
          })
        }
        this.markDeviceSite(data)
      })
    },
    // 标记设备点
    markDeviceSite(data) {
      var keyData = data.data.devices
      this.keyData = data.data.devices
      // 遍历国控站位置
      this.stateControlStation()
      var group = L.layerGroup().addTo(this.map)
      this.keys = []
      for (let i = 0; i < keyData.length; i++) {
        if (keyData[i].a34002) {
          this.keys.push(Math.floor(JSON.parse(keyData[i].a34002)))
        } else if (keyData[i].a34004) {
          this.keys.push(Math.floor(JSON.parse(keyData[i].a34004)))
        } else if (keyData[i].a21026) {
          this.keys.push(Math.floor(JSON.parse(keyData[i].a21026)))
        } else if (keyData[i].a21004) {
          this.keys.push(Math.floor(JSON.parse(keyData[i].a21004).toFixed(0)))
        } else if (keyData[i].a21005) {
          this.keys.push(JSON.parse(keyData[i].a21005).toFixed(3))
        } else if (keyData[i].a05024) {
          this.keys.push(Math.floor(JSON.parse(keyData[i].a05024)))
        } else if (keyData[i].a99054) {
          this.keys.push(JSON.parse(keyData[i].a99054).toFixed(3))
        } else {
          // for (let j = 0; j < keyData.length; j++) {
          this.keys.push(JSON.parse('null'))
          // }
        }
        // console.log(this.keys)
        var lat = keyData[i].latitude
        this.lats[i] = keyData[i].latitude
        var lng = keyData[i].longitude
        this.lngs[i] = keyData[i].longitude
        // 对比各个key中的标准数据，标记展示不同的颜色
        var colorNum = 7
        if (keyData[i].a34002) {
          var data = Math.floor(JSON.parse(keyData[i].a34002))
          switch (true) {
            case (data < 0): {
              colorNum = 7
              break
            }
            case (data === 0): {
              colorNum = 0
              break
            }
            case (data <= 50): {
              colorNum = 1
              break
            }
            case (data <= 150): {
              colorNum = 2
              break
            }
            case (data <= 250): {
              colorNum = 3
              break
            }
            case (data <= 350): {
              colorNum = 4
              break
            }
            case (data <= 420): {
              colorNum = 5
              break
            }
            case (data > 420): {
              colorNum = 6
              break
            }
            default:
              break
          }
        } else if (keyData[i].a34004) {
          var data = Math.floor(JSON.parse(keyData[i].a34004))
          switch (true) {
            case data < 0: {
              colorNum = 7
              break
            }
            case data === 0: {
              colorNum = 0
              break
            }
            case data <= 35: {
              colorNum = 1
              break
            }
            case data <= 75: {
              colorNum = 2
              break
            }
            case data <= 115: {
              colorNum = 3
              break
            }
            case data <= 150: {
              colorNum = 4
              break
            }
            case data <= 250: {
              colorNum = 5
              break
            }
            case data > 250: {
              colorNum = 6
              break
            }
            default:
              break
          }
        } else if (keyData[i].a21026) {
          var data = Math.floor(JSON.parse(keyData[i].a21026))
          switch (true) {
            case data < 0: {
              colorNum = 7
              break
            }
            case data === 0: {
              colorNum = 0
              break
            }
            case data <= 50: {
              colorNum = 1
              break
            }
            case data <= 150: {
              colorNum = 2
              break
            }
            case data <= 475: {
              colorNum = 3
              break
            }
            case data <= 800: {
              colorNum = 4
              break
            }
            case data <= 1600: {
              colorNum = 5
              break
            }
            case data > 1600: {
              colorNum = 6
              break
            }
            default:
              break
          }
        } else if (keyData[i].a21004) {
          var data = Math.floor(Math.floor(JSON.parse(keyData[i].a21004).toFixed(0)))
          switch (true) {
            case data < 0: {
              colorNum = 7
              break
            }
            case data === 0: {
              colorNum = 0
              break
            }
            case data <= 40: {
              colorNum = 1
              break
            }
            case data <= 80: {
              colorNum = 2
              break
            }
            case data <= 180: {
              colorNum = 3
              break
            }
            case data <= 280: {
              colorNum = 4
              break
            }
            case data <= 565: {
              colorNum = 5
              break
            }
            case data > 565: {
              colorNum = 6
              break
            }
            default:
              break
          }
        } else if (keyData[i].a21005) {
          var data = JSON.parse(keyData[i].a21005).toFixed(3)
          switch (true) {
            case data < 0: {
              colorNum = 7
              break
            }
            case data === 0: {
              colorNum = 0
              break
            }
            case data <= 2: {
              colorNum = 1
              break
            }
            case data <= 4: {
              colorNum = 2
              break
            }
            case data <= 14: {
              colorNum = 3
              break
            }
            case data <= 24: {
              colorNum = 4
              break
            }
            case data <= 36: {
              colorNum = 5
              break
            }
            case data > 36: {
              colorNum = 6
              break
            }
            default:
              break
          }
        } else if (keyData[i].a05024) {
          var data = Math.floor(JSON.parse(keyData[i].a05024))
          switch (true) {
            case data < 0: {
              colorNum = 7
              break
            }
            case data === 0: {
              colorNum = 0
              break
            }
            case data <= 160: {
              colorNum = 1
              break
            }
            case data <= 200: {
              colorNum = 2
              break
            }
            case data <= 300: {
              colorNum = 3
              break
            }
            case data <= 400: {
              colorNum = 4
              break
            }
            case data <= 800: {
              colorNum = 5
              break
            }
            case data > 800: {
              colorNum = 6
              break
            }
            default:
              break
          }
        } else if (keyData[i].a99054) {
          var data = JSON.parse(keyData[i].a99054).toFixed(3)
          switch (true) {
            case data < 0: {
              colorNum = 7
              break
            }
            case data === 0: {
              colorNum = 0
              break
            }
            case data <= 0.5: {
              colorNum = 1
              break
            }
            case data <= 1: {
              colorNum = 2
              break
            }
            case data <= 1.5: {
              colorNum = 3
              break
            }
            case data <= 2: {
              colorNum = 4
              break
            }
            case data <= 3: {
              colorNum = 5
              break
            }
            case data > 3: {
              colorNum = 6
              break
            }
              // default:
              //   break
          }
        }

        var blueIcon = L.icon({
          iconUrl: require('@/assets/icon/ico' + colorNum + '.png'),
          // iconUrl: require('@/assets/icon/ico2.png'),
          iconSize: [60, 60],
          iconAnchor: [13, 21],
          className: 'my-device'
        })
        // 添加标记到地图
        L.marker([lat, lng], {
          icon: blueIcon
        }).addTo(group)
        // console.log(JSON.parse(this.keys[i]))
        var myIcon = L.divIcon({
          html: this.keys[i],
          className: 'my-div-icon',
          iconSize: 30
        })
        var marker = L.marker([lat, lng], { icon: myIcon }).addTo(group)
        // 给标记添加鼠标移入事件，mouseover事件会冒泡
        var _this = this
        marker.on('mouseover', function(e) {
          this.noneData = false
          // $.getJSON('http://47.99.64.149:8080/historyFiveMinutely/queryPopDataByMac', { 'mac': keyData[i].mac }, (res) => {
          //   var data = JSON.stringify(res.data).replace(/,/g, `<br>`).replace(/{|}|"/g, '')
          //   // console.log(data)
          //   this.bindPopup(data).openPopup()
          // })
          _this.$request({
            url: '/historyFiveMinutely/queryPopDataByMac',
            method: 'get',
            params: {
              mac: keyData[i].mac
            }
          }).then((res) => {
            for (const key in res.data) {
              var tempDecimal = res.data[key].replace(/[^\d.]/g, '').split('.')[1]
              if (key !== '名称' && key !== '时间') {
                if (Number(tempDecimal) === 0) {
                  res.data[key] = parseInt(res.data[key]) + res.data[key].split(' ')[1]
                } else {
                  res.data[key] = Number(res.data[key].split(' ')[0]).toFixed(2) + res.data[key].split(' ')[1]
                }
                // var num = res.data[key].split(' ')[0]
                // res.data[key] = (num - 0).toFixed(3)
              }
            }
            var data = JSON.stringify(res.data).replace(/,/g, `<br>`).replace(/{|}|"/g, '')
            this.bindPopup(data).openPopup()
          }).catch((err) => {
            console.log(err)
          })
        })
        // 给标记点添加鼠标移出事件
        marker.on('mouseout', function(e) {
          this.noneData = false
          this.bindPopup().closePopup()
        })
      }
    },
    // 给标记点添加移入移出事件
    // moveInAndOut() {
    //
    // },
    // 国控站经纬度
    stateControlStation() {
      // this.$axios.get('monitorPoint/queryStateControlStation', {
@@ -749,6 +1361,9 @@
      this.timer = setInterval(() => {
        this.times--
        if (this.times === 0) {
          // 时间点选择标记消失
          var mouseDiv2 = document.querySelector('.mouseDiv2')
          mouseDiv2.style.display = 'none'
          // clearInterval(this.timer)
          if (this.windState === 1) {
            // this.ws.close()
@@ -787,6 +1402,7 @@
      this.map = map // data上需要挂载
      window.map = map
    },
    // 更改不同的值区间
    change(index) {
      this.changeColor = index
      var pr = ''
@@ -999,15 +1615,102 @@
  /* border-radius: 10px; */
  border: 2px solid #ff7f50;
}
.topDate {
  position: absolute;
  top: 50px;
  width: 100%;
  padding: 15px 10px 3px 10px;
  z-index: 999;
  //background: #ccc;
  background: rgba(204, 204, 204, 0.8);
  box-shadow: 1px 1px 5px #666;
  cursor: pointer;
}
.mouseDiv, .mouseDiv2{
  position: absolute;
  left: 0;
  background-color: #009845;
  width: 36px;
  height: 22px;
  border-radius: 5px;
  top: -34px;
  display: none;
  text-align: center;
  line-height: 22px;
  padding: 1px;
  color: white;
}
.sjDiv, .sjDiv2{
  width: 0px;
  height: 0px;
  border: 10px solid transparent;
  border-top-color: #009845;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  top: 100%;
  z-index: -1;
}
.mouseDiv2{
  background-color: #2b2b2b;
}
.sjDiv2{
  border-top-color: #2b2b2b;
}
.jdt{
  height: 5px;
  width: 73%;
  display: flex;
  position: relative;
}
.timeDiv{
  width: 73%;
  float: left;
}
.topDate .timeDiv:nth-child(3){
  border-left: 1px solid white;
  border-right: 1px solid white;
}
.topDate ul{
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
}
.topDate li{
  width: 1.36986%;
  //padding: 0 2%;
  box-sizing: border-box;
  //transform: translateX(50%);
}
.topDate p{
  text-align: center;
  font-size: 16px;
  margin: 0;
  padding: 0;
}
.jdt li{
  //box-sizing: border-box;
  border-left: 1px solid white;
  background-color: rgba(0,0,0,0.3);
  height: 100%;
  width: 1.36986%;
  list-style: none;
}
.dayDiv p{
  width: 32.87664%;
  text-align: center;
}
.top {
  position: absolute;
  top: 0;
  top: 0px;
  width: 100%;
  padding: 5px 10px;
  z-index: 999;
  /* background: #ccc; */
  background: rgba(204, 204, 204, 0.5);
  box-shadow: 1px 1px 5px #666;
  //box-shadow: 1px 1px 5px #666;
}
.top > .left {
  padding: 5px 10px;
@@ -1129,7 +1832,7 @@
  bottom: 10px;
  left: 10px;
  width: 435px;
  height: 50px;
  height: 36px;
  z-index: 999;
  border-radius: 3px;
}