smart_storage_web/src/components/DispositionPointData/index.vue

<template>
  <div class="disposition-component">
    <pointDynamic
      ref="pointDialog"
      :page-location="pageLocation"
      :div-location="divLocation"
      :col-select-table-data="col_table_data"
      :permission-id="permissionId"
      :table-data="table_data"
      :disposition-show="dispositionShow"
      :station-id="stationId"
      :point-type-list="pointTypeList"
      :symbol-type="symbolType"
      :device-id="deviceId"
      :submit-site-loading="submitSiteLoading"
      @UpdataTableData="UpdataTableData"
      @clear="clear"
      @openDevDialog="openDevDialog"
      @confirm="confirm"
      @close="close"
    />
    <colSelectDialog
      ref="dialog"
      :is-show="colDialog"
      :dev-tree-data="devTreeData"
      :col-tree-data="colTreeData"
      @changeSensType="changeSensType"
      @GetDeviceId="GetDeviceId"
      @GetQueryPoint="GetQueryPoint"
      @GetResultData="GetResultData"
      @Close="CloseCol"
    />
  </div>
</template>

<script>
import { GetTreeTrueDevices } from '@/api/system/virtual-device-col'
import { GetQueryPointList } from '@/api/surveillance/battery-analysis'
import { AddPointList, GetPointConfig } from '@/api/home-page'
export default {
  name: 'DispositionComponent',
  props: {
    dispositionShow: { // 弹窗是否展示
      type: Boolean,
      default: false
    },
    pageLocation: {
      type: String,
      default: ''
    },
    divLocation: {
      type: String,
      default: undefined
    },
    deviceId: {
      type: Number,
      default: undefined
    }
  },
  data() {
    return {
      isShow: false,
      permissionId: null,
      otherPermissionId: null,
      table_data: [],
      devTreeData: [],
      dev_loading: false,
      sensType: 2,
      srcId: null,
      colDialog: false,
      colTableData: [],
      col_table_data: [],
      colTreeData: [],
      stationId: null,
      submitSiteLoading: false
    }
  },
  computed: {
    currentStation() {
      return this.$store.getters.currentStation || undefined
    },
    pointTypeList() {
      return this.$store.getters.dicts['pointType'] || []
    },
    symbolType() {
      return this.$store.getters.dicts['symbolType'] || []
    }
  },
  watch: {
    dispositionShow: {
      handler(val) {
        if (val) {
          if (this.$store.getters.menuList.length && this.stationId !== 720) {
            this.permissionId = this.$store.getters.menuList.find((item) => {
              return item.url === this.$route.path
            }).id
          }
          this.getCurveConfig()
        }
      },
      deep: true,
      immediate: true
    },
    currentStation: {
      handler(val) {
        if (val && val.id) {
          this.stationId = val.id
          this.FindIntegratedCabinets()
          if (this.$store.getters.menuList.length && val.id !== 720) {
            this.permissionId = this.$store.getters.menuList.find((item) => {
              return item.url === this.$route.path
            }).id
          }
        }
      },
      deep: true,
      immediate: true
    }
  },

  methods: {
    clear() {
      this.col_table_data = []
      this.colTreeData = []
      this.$refs.dialog.clearAll()
    },
    async confirm(params) {
      this.submitSiteLoading = true
      try {
        await AddPointList(params)
        this.$message.success(this.$t('componentLang.operateSuccess'))
        this.close()
        this.$emit('getData')
      } catch (error) {
        // this.$message.error('新增失败')
      } finally {
        this.submitSiteLoading = false
      }
    },
    async GetQueryPoint() {
      if (this.srcId[0]) {
        this.$refs.dialog.load_data_org2 = true
        const params = {
          sensType: this.sensType,
          srcId: this.srcId[0],
          stationId: this.stationId
        }
        try {
          const res = await GetQueryPointList(params)
          const option = res.data
          // 将指标的数据处理成树
          if (option.length > 0) {
            option.forEach((el) => {
              el.colName = el.deviceName
              el.col = el.srcId
            })
            option[0].deviceTypeColList.forEach((item) => {
              item.flgId = this.srcId[0] + item.col
            })
            this.colTreeData = option[0].deviceTypeColList
          } else {
            this.colTreeData = []
          }
        } catch (error) {
          // console.log(error)
        } finally {
          this.$refs.dialog.load_data_org2 = false
        }
      }
    },
    openDevDialog() {
      this.colDialog = true
      this.colTreeData = []
      this.$refs.dialog.clearAll()
    },
    async FindIntegratedCabinets() {
      this.dev_loading = true
      try {
        const res = await GetTreeTrueDevices({ stationId: this.stationId })
        this.devTreeData = res.data
      } catch (error) {
        // console.log(error);
      } finally {
        this.dev_loading = false
      }
    },
    close() {
      this.$emit('close')
    },
    async getCurveConfig() {
      const params = {
        pageLocation: this.pageLocation,
        permissionId: this.permissionId,
        divLocation: this.divLocation,
        stationId: this.stationId,
        deviceId: this.deviceId
      }
      const res = await GetPointConfig(params)
      if (res.data.length) {
        res.data.forEach((item) => {
          item.dragId = Math.floor(Math.random() * 1000000) + 1
        })
      }
      this.table_data = res.data
    },
    changeSensType(val) {
      this.sensType = val
      this.GetQueryPoint()
    },
    GetDeviceId(srcId) {
      // console.log(srcId)
      this.srcId = [srcId]
    },
    UpdataTableData(tableData) {
      this.col_table_data = tableData
    },
    GetResultData(newArr, tableData, colName) {
      this.colTableData = tableData
      tableData.forEach((item) => {
        this.col_table_data.push({
          ...item,
          id: undefined,
          name: item.colName
        })
      })
    },
    CloseCol(data) {
      this.colTableData = data.tableData
      this.colDialog = false
    }
  }
}
</script>

<style lang="scss" scoped>

</style>