xiaoshi_system/src/views/visual/components/sceneSVG.vue

<template>
  <div class="svgDataDiv" ref="svgDataDiv">
      <svg-visual @click="handleClick" :total="total"></svg-visual>
   
    <eventDrawer ref="eventDrawer" @close="closeDrawer"></eventDrawer>
  </div>
</template>

<script>
import svgVisual from './components/svgVisual.vue'
import eventDrawer from "./drawer/eventDrawer";
export default {
  components: {
    svgVisual,
    eventDrawer
  },
  props: {
    searchOption:{
      type:Object,
      default:()=>{
        return {}
      }
    }
  },
  data() {
    return {
        //应用场景对应事件总数量
        total: {},
    };
  },
  watch: {
    searchOption:{
      handler(newValue, oldValue) {//这里的第一个参数是改变后的值，第二个参数是原来的值
        this.getScenarioTotal()
      },
      immediate: true
    }
  },
  computed: {
    scenario(){
      return this.$store.state.dictMessage.scenario
    }
  },
  created() {},
  async mounted() {
    //获取块的最大宽高
    this.getDivWidth()
    //获取应用场景对应事件总数量
    await this.getScenarioTotal()
  },
  methods: {
    //获取块的最大宽高
    getDivWidth(){
      let width = this.$refs.svgDataDiv.clientWidth
      let height = this.$refs.svgDataDiv.clientHeight
      var maxHeight = 0
      var maxWidth = 0
      var rand = 1322.078125/642.09375
      if(width>height){
        if(height * rand > width){
          maxHeight = Math.floor(width/rand)
        }else{
          maxHeight = height
        }
        maxWidth = maxHeight * rand
      }else{
        if(width * rand > height){
          maxWidth = Math.floor(height/rand)
        }else{
          maxWidth = width
        }
        maxHeight =  Math.floor(maxWidth / rand)
      }
      this.$refs.svgDataDiv.style.width = maxWidth + 'px'
      this.$refs.svgDataDiv.style.height = maxHeight + 'px'
    },
    // 应用场景对应事件总数量
    async getScenarioTotal() {
      var params = {
          "current": 1,
          "size": 10,
          "searchQuery": this.$commonJS.objectToString(this.searchOption),
          "orderDTOList": [
            {
              "orderBy": "createTime",
              "orderType": 1
            }
          ],
          "groupBy": "scenarioNames"
        }
      await this.$api.groupEvent(params).then(res => {
        if (res.code == 200) {
          this.total=res.data.data.values
        }
      }).catch(err => {
        this.total = []
      })
    },
    // 详情及清单按钮事件
    handleClick(data) {
      const { title, type } = data
      switch (type) {
        case 0:
          if(Object.keys(this.searchOption).length>0){
            this.$emit('toFlowPath',title)
            break;
          }
          this.$router.push({
            path: `/visual/${encodeURIComponent(title)}`,
          })
          break
        case 1:
          var scenarioId = this.scenario.find(item=>{
            return item.name == title
          }).id
          this.$refs.eventDrawer.open(title, [scenarioId])
          break
      }
    },
    //关闭弹窗
    closeDrawer(){
        //获取应用场景对应事件总数量
        this.getScenarioTotal()
    },
  },
};
</script>
<style lang="scss" scoped>
.svgDataDiv {
  // max-height: calc(100% - 163px);
  width: 100%;
  height: 100%;
  margin: 0px auto 0;
  display: flex;
  flex-direction: row;
  justify-content: center;
  max-width: 1420px;
  
}
</style>