Merge branch 'develop' of http://xearth.cn:6600/r/wuyushui/SewerAndRainNetw...

wangqi

2021-04-07 866f47aee553c4eadb3d29987d2d0b09b4d2114e

Merge branch 'develop' of http://xearth.cn:6600/r/wuyushui/SewerAndRainNetwork into develop

 src/assets/css/map/map-panel-style.less

@@ -301,6 +301,9 @@
.el-table .success-row {
  background: #30455f;
}
.el-table tbody tr:hover>td {
  background-color:#28304d !important;
}
/***********************************************动画效果************/
.transition{
  transition: all .5s;
@@ -337,4 +340,4 @@
    margin: 0 auto;
  }

}
}

 src/components/BaseNav/PublicBounced/GasComponents/PublicTable.vue

@@ -10,8 +10,7 @@
        <el-table :data="listData" style="width: 100%" stripe='stripe'
                  :height="300"
                  tooltip-effect="dark" :row-class-name="tableRowClassName">
          <el-table-column v-for="(item, index) in listLabel" :key="index" :prop="item.prop"
                           :label="item.label"></el-table-column>
          <el-table-column v-for="(item, index) in listLabel" :key="index" :prop="item.prop" :label="item.label"></el-table-column>
        </el-table>
      </div>
    </div>

 src/components/BaseNav/PublicBounced/GasComponents/PublicTabs.vue

@@ -53,7 +53,37 @@
  props: ['displayContentTab', 'value', 'setWasteGasdata', 'setWasteWaterdata'],
  data () {
    return {
      tabData: []
      tabData: [],
      listLabel: [
        {
          label: '序号',
          prop: 'StoragePlaceId'
        },
        {
          label: '类别',
          prop: 'StoragePlaceTypeName'
        },
        {
          label: '固废名称',
          prop: 'StoragePlaceName'
        },
        {
          label: '代码',
          prop: 'StorageZDMJ'
        },
        {
          label: '产生量(t)',
          prop: 'StorageZCL'
        },
        {
          label: '贮存量(t)',
          prop: 'StorageZCNL'
        },
        {
          label: '产生装置',
          prop: 'StorageType'
        }
      ]
    }
  },
  mounted () {
@@ -144,7 +174,7 @@
  z-index: 999;
  position: absolute;
  width: 10px;
  //height: 10px;
  height: 10px;
  background: rgba(0, 0, 0, 0);
  border: 1px solid #47d5ea;
}

 src/components/BaseNav/PublicBounced/PublicBounced.vue

@@ -1,28 +1,50 @@
<template>
    <div class="public-bounced" v-draw v-if="flag">
        <div class="public-bounced-title">
            <span>{{ displayContentTitle }}</span>
            <i class="el-icon-circle-close" @click="closePopup"></i>
        </div>
        <div class="public-bounced-content">
            <div class="public-bounced-content-left">
                <public-tabs :displayContentTab="displayContentTab" :value="value"
                             :setWasteGasdata="setWasteGasdata" :setWasteWaterdata="setWasteWaterdata"></public-tabs>
                <div class="public-bounced-content-left-bottom">
                    <public-table v-if="value === 'gufei'"
                                  :displayContentTable="displayContentTable"></public-table>
                    <public-chart v-else :getWasteGasDetails="getWasteGasDetails"
                                  :value="value"
                                  :getWasteWaterMonitoringDetails="getWasteWaterMonitoringDetails"
                                  :getWasteWaterMonitoring="getWasteWaterMonitoring">
                    </public-chart>
                </div>
            </div>
            <div class="public-bounced-content-right">
                <public-video></public-video>
            </div>
        </div>
  <div class="public-bounced" v-drag v-if="flag">
    <div class="public-bounced-title">
      <span>{{ displayContentTitle }}</span>
      <i class="el-icon-circle-close" @click="closePopup"></i>
    </div>
    <div class="public-bounced-content">
      <div class="public-bounced-content-left">
        <public-tabs :displayContentTab="displayContentTab" :value="value"
                     :setWasteGasdata="setWasteGasdata" :setWasteWaterdata="setWasteWaterdata"></public-tabs>
        <div class="public-bounced-content-left-bottom">
          <public-table v-if="value === 'gufei'"
                        :displayContentTable="displayContentTable"></public-table>
          <public-chart v-else :getWasteGasDetails="getWasteGasDetails"
                        :getWasteWaterMonitoring="getWasteWaterMonitoring"></public-chart>
        </div>
      </div>
      <div class="public-bounced-content-right">
        <public-video></public-video>
      </div>
    </div>
  </div>
<!--  <el-dialog-->
<!--      :visible.sync="flag"-->
<!--      width="70%"-->
<!--      class="public-bounced"-->
<!--      :modal="false">-->
<!--    <div class="public-bounced-title">-->
<!--      <span>{{ displayContentTitle }}</span>-->
<!--      <i class="el-icon-circle-close" @click="closePopup"></i>-->
<!--    </div>-->
<!--    <div class="public-bounced-content">-->
<!--      <div class="public-bounced-content-left">-->
<!--        <public-tabs :displayContentTab="displayContentTab" :value="value"-->
<!--                     :setWasteGasdata="setWasteGasdata" :setWasteWaterdata="setWasteWaterdata"></public-tabs>-->
<!--        <div class="public-bounced-content-left-bottom">-->
<!--          <public-table v-if="value === 'gufei'"-->
<!--                        :displayContentTable="displayContentTable"></public-table>-->
<!--          <public-chart v-else :getWasteGasDetails="getWasteGasDetails"-->
<!--                        :getWasteWaterMonitoring="getWasteWaterMonitoring"></public-chart>-->
<!--        </div>-->
<!--      </div>-->
<!--      <div class="public-bounced-content-right">-->
<!--        <public-video></public-video>-->
<!--      </div>-->
<!--    </div>-->
<!--  </el-dialog>-->
</template>

<script>
@@ -56,6 +78,9 @@
    }
  },
  methods: {
    closePopup () {
      this.flag = false
    },
    setData (dataBasic, dataDetailed, value) {
      this.flag = true
      this.value = value
@@ -84,62 +109,62 @@
      this.displayContentTitle = dataWater.Name
      this.flag = true
      this.value = value
    },
    closePopup () {
      this.flag = false
    }
  }
}
</script>

<style lang="less" scoped>
    .public-bounced {
        width: 75%;
        z-index: 999;
        position: absolute;
        bottom: 5%;
        left: 15%;
        background-color: #002432;
        border: 1px #9fc5c8 solid;
.public-bounced {
  width: 75%;
  //height: 540px;
  height: 65%;
  z-index: 999;
  position: absolute;
  bottom: 5%;
  left: 15%;
  background-color: #002432;
  border: 1px #9fc5c8 solid;

        .public-bounced-title {
            border: 1px #a4c0d8 solid;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 5px 0;
  .public-bounced-title {
    border: 1px #a4c0d8 solid;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 5px 0;

            span {
                color: #f4f7ff;
                margin: 0 15px;
                font-size: 14px;
            }

            i {
                color: white;
                margin: 0 15px;
                font-size: 22px;
            }
        }

        .public-bounced-content {
            margin: 15px auto;
            display: flex;
            //align-items: center;
            justify-content: space-around;
            padding: 10px;

            .public-bounced-content-left {
                flex: 3;
                height: 100%;
                margin-right: 10px;
            }

            .public-bounced-content-right {
                flex: 2;
                //width: 48%;
                height: 100%;
            }
        }
    span {
      color: #f4f7ff;
      margin: 0 15px;
      font-size: 14px;
    }

    i {
      color: white;
      margin: 0 15px;
      font-size: 22px;
      cursor: pointer;
    }
  }

  .public-bounced-content {
    margin: 15px 0;
    display: flex;
    //align-items: center;
    justify-content: space-around;
    padding: 10px;

    .public-bounced-content-left {
      flex: 3;
      height: 100%;
      margin-right: 10px;
    }

    .public-bounced-content-right {
      flex: 2;
      //width: 48%;
      height: 100%;
    }
  }
}
</style>

 src/components/BaseNav/SolidWaste/directive/dir.js

@@ -1,59 +1,55 @@
import Vue from 'vue'

// 自定义元素实现弹框拖拽[重点]
Vue.directive('draw', {
  // inserted: function (el, binding, vNode) {
  //   el.setAttribute('style', 'position: fixed; z-index: 9999')
  // },
  bind: function (el, bindding, vNode) {
    el.setAttribute('draggable', true)
    let left, top, width, height
    el._dragstart = function (event) {
      event.stopPropagation()
      left = event.clientX - el.offsetLeft
      top = event.clientY - el.offsetTop
      width = el.offsetWidth
      height = el.offsetHeight
    }
    el._checkPosition = function () { // 防止被拖出边界
      const width = el.offsetWidth
      const height = el.offsetHeight
      let left = Math.min(el.offsetLeft, document.body.clientWidth - width)
      left = Math.max(0, left)
      let top = Math.min(el.offsetTop, document.body.clientHeight - height)
      top = Math.max(0, top)
      el.style.left = left + 'px'
      el.style.top = top + 'px'
      el.style.width = width + 'px'
      el.style.height = height + 'px'
    }
    el._dragEnd = function (event) {
      event.stopPropagation()
      left = event.clientX - left
      top = event.clientY - top
      el.style.left = left + 'px'
      el.style.top = top + 'px'
      el.style.width = width + 'px'
      el.style.height = height + 'px'
      el._checkPosition()
    }
    el._documentAllowDraop = function (event) {
      event.preventDefault()
    }
    document.body.addEventListener('dragover', el._documentAllowDraop)
    el.addEventListener('dragstart', el._dragstart)
    el.addEventListener('dragend', el._dragEnd)
    window.addEventListener('resize', el._checkPosition)
// 使用Vue.directive()定义一个全局指令
// 1.参数一：指令的名称，定义时指令前面不需要写v-
// 2.参数二：是一个对象，该对象中有相关的操作函数
// 3.在调用的时候必须写v-
const drag = Vue.directive('drag', {
  // 1.指令绑定到元素上回立刻执行bind函数，只执行一次
  // 2.每个函数中第一个参数永远是el，表示绑定指令的元素，el参数是原生js对象
  // 3.通过el.focus()是无法获取焦点的，因为只有插入DOM后才生效
  bind: function (el) {
    el.style.cursor = 'move' // 鼠标样式变move样式
  },
  // inserted表示一个元素，插入到DOM中会执行inserted函数，只触发一次
  inserted: function (el) {
    el.onmousedown = function (e) {
      var distX = e.pageX - el.offsetLeft
      var distY = e.pageY - el.offsetTop
      // console.log('元素本身的高：' + el.clientHeight + ',元素本身的宽：' + el.clientWidth)

  unbind: function (el, bindding, vNode) {
    document.body.removeEventListener('dragover', el._documentAllowDraop)
    el.removeEventListener('dragstart', el._dragstart)
    el.removeEventListener('dragend', el._dragEnd)
    window.removeEventListener('resize', el._checkPosition)
    delete el._documentAllowDraop
    delete el._dragstart
    delete el._dragEnd
    delete el._checkPosition
      if (e.preventDefault) {
        e.preventDefault()
      } else {
        e.returnValue = false
      }
      // 解决快速拖动滞后问题

      document.onmousemove = function (e) {
        // 用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
        let left = e.clientX - distX
        let top = e.clientY - distY

        if (left <= 0) {
          left = 5 // 设置成5是为了不离边缘太近
        } else if (left > document.documentElement.clientWidth - el.clientWidth) {
          // document.documentElement.clientWidth 屏幕的可视宽度
          left = document.documentElement.clientWidth - el.clientWidth - 5
        }
        if (top <= 0) {
          top = 5
        } else if (top > document.documentElement.clientHeight - el.clientHeight) {
          top = document.documentElement.clientHeight - el.clientHeight - 5
        }
        el.style.left = left + 'px'
        el.style.top = top + 'px'
      }
      document.onmouseup = function () {
        document.onmousemove = document.onmouseup = null
      }
    }
  },
  // 当VNode更新的时候会执行updated，可以触发多次
  updated: function (el) {
  }
})
export default drag

 src/components/plugin/PathDashFlow.js

@@ -71,6 +71,7 @@
    }
  },
  _fillStroke: function (ctx, layer) {
    // debugger
    var options = layer.options

    if (options.fill) {