<template>
  <div class="dialog_body">
    <div class="top">
      <div class="top_left">
        <div class="title">
          <div>{{ pd.MAJORDANGERSOURCE_NUMBER }}{{ pd.MAJORDANGERSOURCE_NAME }}</div>
          <div>{{ pd.MAJORDANGERSOURCE_TYPE_NAME }}</div>
        </div>
        <div class="img">
          <img :src="imgUrl">
        </div>
      </div>
      <div class="top_center">
        <table>
          <tr>
            <td/>
            <td>当前值</td>
            <td>低预警值</td>
            <td>高预警值</td>
          </tr>
          <tr>
            <td>液位</td>
            <td>{{ pd.STORAGETANK_LIQUIDLEVEL }}</td>
            <td>{{ pd.LIQUIDLEVEL_RANGEMIN }}</td>
            <td>{{ pd.LIQUIDLEVEL_RANGEMAX }}</td>
          </tr>
          <tr>
            <td>温度</td>
            <td>{{ pd.STORAGETANK_TEMPERATURE }}</td>
            <td>{{ pd.TEMPERATURE_RANGEMIN }}</td>
            <td>{{ pd.TEMPERATURE_RANGEMAX }}</td>
          </tr>
        </table>
      </div>
      <div class="liquid-btns"/>
    </div>
    <div class="center">
      <line-chart id="main4" ref="CHART_LIQUIDLEVEL" :chart-data="chartData.LIQUIDLEVEL" />
    </div>
    <div class="center">
      <line-chart id="main5" ref="CHART_TEMPERATURE" :chart-data="chartData.TEMPERATURE" />
    </div>
    <div class="bottom">
      <div class="tabs">
        <div v-for="item in tabs" :class="['tab',{active:item === tabName}]" :key="item" @click="changeTab(item)">
          {{ item }}
        </div>
      </div>
      <table>
        <tr>
          <td>油罐编号</td>
          <td>数据日期</td>
          <td>数据时间</td>
          <td>存储介质</td>
          <td>数值</td>
        </tr>
        <template v-if="logList.length !== 0">
          <tr v-for="(item,index) in logList" :key="index">
            <td>{{ pd.MAJORDANGERSOURCE_NUMBER }}</td>
            <td>{{ item['STORAGETANK' + pd.MAJORDANGERSOURCE_STORAGETANK + '_OPERATTIME'].substr(0, 10) }}</td>
            <td>{{ item['STORAGETANK' + pd.MAJORDANGERSOURCE_STORAGETANK + '_OPERATTIME'].substr(11) }}</td>
            <td v-if="['1#','2#','3#','4#','5#','6#','7#','8#','9#'].indexOf(pd.MAJORDANGERSOURCE_NUMBER)>-1">原油</td>
            <td v-if="['51#','52#','53#','54#'].indexOf(pd.MAJORDANGERSOURCE_NUMBER)>-1">成品油</td>
            <td v-if="['1#','2#','3#','4#','5#','6#','7#','8#','9#','51#','52#','53#','54#'].indexOf(pd.MAJORDANGERSOURCE_NUMBER)===-1">存储介质</td>
            <td v-show="tabName === '液位'">{{ item['STORAGETANK' + pd.MAJORDANGERSOURCE_STORAGETANK + '_LIQUIDLEVEL'] }}</td>
            <td v-show="tabName === '温度'">{{ item['STORAGETANK' + pd.MAJORDANGERSOURCE_STORAGETANK + '_TEMPERATURE'] }}</td>
          </tr>
        </template>
        <template v-else>
          <tr>
            <td colspan="5" style="text-align: center">暂无数据</td>
          </tr>
        </template>
      </table>
    </div>
  </div>
</template>

<script>
import { requestFN } from '@/utils/request'
import LineChart from '../../echarts/linechartBI'
import { upload } from '@/utils/upload'

const lineChartData = {
  LIQUIDLEVEL: {
    dataX: ['15:14:00', '15:14:05', '15:14:10', '15:14:15', '15:14:20'],
    legend: ['液位'],
    color: ['#3888FA'],
    dataY: [[13.172, 13.171, 13.173, 13.171, 13.175]]
  },
  TEMPERATURE: {
    dataX: ['15:14:00', '15:14:05', '15:14:10', '15:14:15', '15:14:20'],
    legend: ['温度'],
    color: ['#3888FA'],
    dataY: [[26.6, 26.3, 26.5, 26.6, 26.2]]
  }
}
export default {
  components: {
    LineChart
  },
  props: {
    id: {
      type: String,
      default() {
        return ''
      }
    },
    type: {
      type: String,
      default() {
        return ''
      }
    },
    gangkou: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      tabs: ['液位', '温度'],
      tabName: '液位',
      chartData: lineChartData,
      listLoading: true,
      activeName: 'first',
      imgUrl: require('@/assets/images/tanks.png'),
      pd: {
        MAJORDANGERSOURCE_NAME: '', // 重大危险源名称
        MAJORDANGERSOURCE_TYPE_NAME: '', // 重大危险源类型
        MAJORDANGERSOURCE_ADDRESS: '', // 重大危险源地址
        MAJORDANGERSOURCE_LONGITUDE: '', // 重大危险源位置经度
        MAJORDANGERSOURCE_LATITUDE: '', // 重大危险源位置纬度
        MAJORDANGERSOURCE_NUMBER: '', // 重大危险源编号
        USE_DATE: '', // 投入使用日期
        DECLARATION_LEVEL_NAME: '', // 申报等级
        STORAGE_ACTUAL: '', // 实际储存量
        STORAGE_MAX: '', // 最大储量
        CONTROL_MEASURES: '', // 管控措施
        BRANCHEMERGENCYPLAN_NAME: '', // 分公司应急预案名称
        BRANCHEMERGENCYPLAN_FILEPATH: '', // 分公司应急预案文件
        RESPONSIBLE_PERSON_NAME: '', // 责任人姓名
        RESPONSIBLE_PERSON_PHONE: ''// 联系方式
      },
      storageTankData: {}, // 监测数据
      hasDisposal: false,
      disposalNew: { // 报警信息（待创建）
        MAJORDANGERSOURCE_ID: this.id,
        ALARM_TYPE: '', // 报警类型
        ALARM_VALUE: '', // 报警值
        ALARM_LEVEL: '', // 报警级别（1.一级 2.二级 3.三级 4.四级）
        ALARM_RANGE_MIN: '', // 报警阈值下限
        ALARM_RANGE_MAX: '' // 报警阈值上限
      },
      ALARM_TYPE_List: [], // 数据字典
      ALARM_LEVEL_List: [{ VALUE: '1', NAME: '一级' }, { VALUE: '2', NAME: '二级' }, { VALUE: '3', NAME: '三级' }, { VALUE: '4', NAME: '四级' }],
      disposal: { // 报警信息
        MAJORDANGERSOURCE_DISPOSAL_ID: '',
        MAJORDANGERSOURCE_ID: this.id,
        ALARM_TYPE: '', // 报警类型
        ALARM_VALUE: '', // 报警值
        ALARM_LEVEL: '', // 报警级别（1.一级 2.二级 3.三级 4.四级）
        ALARM_RANGE_MIN: '', // 报警阈值下限
        ALARM_RANGE_MAX: '', // 报警阈值上限
        DISPOSAL_TIME: '', // 处置生成时间
        DISPOSAL_PERSON: '', // 处置人
        DISPOSAL_METHOD: '', // 处置方式
        DISPOSAL_DESC: '', // 处置描述
        DISPOSAL_TIME_OVER: '', // 处置完成时间
        disposalBeforeFile: [], // 处置前照片
        disposalAfterFile: [] // 处置后照片
      },
      dialogFormEdit: false,
      dialogImageUrl: '',
      dialogVisible: false,
      rules: {
        ALARM_TYPE: [{ required: true, message: '请选择报警类型', trigger: 'blur' }],
        ALARM_VALUE: [{ required: true, message: '报警值不能为空', trigger: 'blur' }],
        ALARM_LEVEL: [{ required: true, message: '报警级别（1.一级 2.二级 3.三级 4.四级）不能为空', trigger: 'blur' }],
        ALARM_RANGE_MIN: [{ required: true, message: '报警阈值下限不能为空', trigger: 'blur' }],
        ALARM_RANGE_MAX: [{ required: true, message: '报警阈值上限不能为空', trigger: 'blur' }]
      },
      total: 0,
      logList: [],
      timer: null,
      msg: null
    }
  },
  created() {
    this.getDict()
    this.getData()
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer)
      this.timer = null
    }
    if (this.msg) {
      this.msg.close()
      this.msg = null
    }
  },
  methods: {
    changeTab(tabName) {
      this.tabName = tabName
    },
    getData() {
      requestFN(
        '/homemajor/getMajordangersourceInfo',
        {
          MAJORDANGERSOURCE_ID: this.id,
          GANGKOU: this.gangkou
        }
      ).then((data) => {
        this.pd = Object.assign({}, data.pd) // copy obj
        this.getStorageTankData()
        this.getStorageTankLogList()
        this.listLoading = false
      }).catch((e) => {
        this.listLoading = false
      })
    },
    handleClick(tab, event) {
      console.log(tab, event)
    },
    cancleDisposal() {
      this.dialogFormEdit = false
      this.timer = setInterval(this.handleTimerOperation, 5000)
    },
    handleDisposal() {
      // console.info(this.disposal)
      this.rules.DISPOSAL_PERSON = [{ required: true, message: '处置人不能为空', trigger: 'blur' }]
      this.rules.DISPOSAL_METHOD = [{ required: true, message: '处置方式不能为空', trigger: 'blur' }]
      this.rules.DISPOSAL_DESC = [{ required: true, message: '处置描述不能为空', trigger: 'blur' }]
      this.rules.DISPOSAL_TIME_OVER = [{ required: true, message: '请选择处置完成时间', trigger: 'blur' }]
      this.dialogFormEdit = true
      if (this.timer) {
        clearInterval(this.timer)
        this.timer = null
      }
    },
    handlePicturePreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    handleBeforeUploadDisposalBefore(file) {
      const types = ['image/jpeg', 'image/jpg', 'image/png']
      const isImage = types.includes(file.type)
      if (!isImage) {
        this.$message.error('上传图片只能是 JPG、JPEG、PNG 格式!')
        return false
      } else {
        this.disposal.disposalBeforeFile.push(file)
      }
    },
    handleBeforeUploadDisposalAfter(file) {
      const types = ['image/jpeg', 'image/jpg', 'image/png']
      const isImage = types.includes(file.type)
      if (!isImage) {
        this.$message.error('上传图片只能是 JPG、JPEG、PNG 格式!')
        return false
      } else {
        this.disposal.disposalAfterFile.push(file)
      }
    },
    // 保存
    confirm(methodName) {
      if (methodName == 'add') {
        this.rules.DISPOSAL_PERSON = [{ required: false, message: '处置人不能为空', trigger: 'blur' }]
        this.rules.DISPOSAL_METHOD = [{ required: false, message: '处置方式不能为空', trigger: 'blur' }]
        this.rules.DISPOSAL_DESC = [{ required: false, message: '处置描述不能为空', trigger: 'blur' }]
        this.rules.DISPOSAL_TIME_OVER = [{ required: false, message: '请选择处置完成时间', trigger: 'blur' }]

        this.listLoading = true
        requestFN(
          '/majordangersourcedisposal/' + methodName,
          this.disposal
        ).then((data) => {
          this.listLoading = false
          this.disposal.MAJORDANGERSOURCE_DISPOSAL_ID = data.pd.MAJORDANGERSOURCE_DISPOSAL_ID
          this.disposal.DISPOSAL_TIME = data.pd.DISPOSAL_TIME
          console.info(this.disposal)
          // this.dialogFormEdit = false
          // this.hasDisposal = false
        }).catch((e) => {
          this.listLoading = false
        })
      } else if (methodName == 'up') {
        this.rules.DISPOSAL_PERSON = [{ required: false, message: '处置人不能为空', trigger: 'blur' }]
        this.rules.DISPOSAL_METHOD = [{ required: false, message: '处置方式不能为空', trigger: 'blur' }]
        this.rules.DISPOSAL_DESC = [{ required: false, message: '处置描述不能为空', trigger: 'blur' }]
        this.rules.DISPOSAL_TIME_OVER = [{ required: false, message: '请选择处置完成时间', trigger: 'blur' }]

        this.listLoading = true
        requestFN(
          '/majordangersourcedisposal/' + methodName,
          this.disposal
        ).then((data) => {
          this.listLoading = false
          this.disposal.MAJORDANGERSOURCE_DISPOSAL_ID = data.pd.MAJORDANGERSOURCE_DISPOSAL_ID
          this.disposal.DISPOSAL_TIME = data.pd.DISPOSAL_TIME
          // this.dialogFormEdit = false
          // this.hasDisposal = false
        }).catch((e) => {
          this.listLoading = false
        })
      } else {
        this.$refs.form.validate(valid => {
          if (valid) {
            if (this.$refs.disposalBeforeUpload.uploadFiles.length < 1) {
              this.$message({
                message: '请上传处置前照片',
                type: 'error'
              })
              return false
            }
            if (this.$refs.disposalAfterUpload.uploadFiles.length < 1) {
              this.$message({
                message: '请上传处置后照片',
                type: 'error'
              })
              return false
            }
            this.uploadDisposalBeforeFile()
            this.uploadDisposalAfterFile()
            this.listLoading = true
            this.disposal.DISPOSAL_STATUS = '1'
            console.info(this.disposal)
            requestFN(
              '/majordangersourcedisposal/' + methodName,
              this.disposal
            ).then((data) => {
              this.listLoading = false
              this.dialogFormEdit = false
              this.hasDisposal = false
              this.resetDisposal()
              console.info(this.disposal)
              this.timer = setInterval(this.handleTimerOperation, 5000)
            }).catch((e) => {
              this.listLoading = false
            })
          } else {
            return false
          }
        })
      }
    },
    uploadDisposalBeforeFile() {
      this.$refs.disposalBeforeUpload.submit()
      const formData = new FormData()
      for (var i = 0; i < this.disposal.disposalBeforeFile.length; i++) {
        if (this.disposal.disposalBeforeFile[i]) {
          formData.append('FFILE', this.disposal.disposalBeforeFile[i])
        }
      }
      // formData.append('FFILE', this.disposal.disposalBeforeFile)
      console.info(this.disposal.MAJORDANGERSOURCE_DISPOSAL_ID)
      formData.append('FOREIGN_KEY', this.disposal.MAJORDANGERSOURCE_DISPOSAL_ID)
      formData.append('TYPE', 20)
      this.uploadFileSubmit(formData, '处置前照片上传完成')
    },
    uploadDisposalAfterFile() {
      this.$refs.disposalAfterUpload.submit()
      const formData = new FormData()
      for (var i = 0; i < this.disposal.disposalAfterFile.length; i++) {
        if (this.disposal.disposalAfterFile[i]) {
          formData.append('FFILE', this.disposal.disposalAfterFile[i])
        }
      }
      // formData.append('FFILE', this.disposal.disposalAfterFile)
      console.info(this.disposal.MAJORDANGERSOURCE_DISPOSAL_ID)
      formData.append('FOREIGN_KEY', this.disposal.MAJORDANGERSOURCE_DISPOSAL_ID)
      formData.append('TYPE', 21)
      this.uploadFileSubmit(formData, '处置后照片上传完成')
    },
    uploadFileSubmit(formData, str) {
      upload(
        '/imgfiles/add',
        formData
      ).then((data) => {
        console.info(str)
      }).catch((e) => {
      })
    },

    handleTimerOperation() {
      this.getStorageTankData()
      this.getStorageTankLogList()
    },
    // 获取监测数据实时数据
    getStorageTankData() {
      // var _this = this
      // storagetank/goEdit
      requestFN(
        '/homemajor/getStoragetankInfo',
        {
          MAJORDANGERSOURCE_STORAGETANK_ID: '1'
        }
      ).then((data) => {
        this.storageTankData = Object.assign({}, data.pd) // copy obj
        const liquidLevel = this.storageTankData['STORAGETANK' + this.pd.MAJORDANGERSOURCE_STORAGETANK + '_LIQUIDLEVEL']
        const temperature = this.storageTankData['STORAGETANK' + this.pd.MAJORDANGERSOURCE_STORAGETANK + '_TEMPERATURE']
        this.$set(this.pd, 'STORAGETANK_LIQUIDLEVEL', liquidLevel)
        this.$set(this.pd, 'STORAGETANK_TEMPERATURE', temperature)
        // eslint-disable-next-line no-unused-vars
        var ALARM_LEVEL = 10
        this.pd.SENSORLIST.forEach(item => {
          // eslint-disable-next-line no-constant-condition,no-cond-assign
          if (item.MONITORINGDEVICESENSOR_TYPE == 'MONITORINGEQUIPMENTTYPE001') { //  液位
            if (Number(item.RANGE1_MIN) <= Number(liquidLevel) && Number(liquidLevel) <= Number(item.RANGE1_MAX)) {
              this.$set(this.pd, 'LIQUIDLEVELCLASS', 'red')
              this.$set(this.pd, 'LIQUIDLEVEL_RANGEMIN', item.RANGE1_MIN)
              this.$set(this.pd, 'LIQUIDLEVEL_RANGEMAX', item.RANGE1_MAX)
              if (ALARM_LEVEL > 1) {
                ALARM_LEVEL = 1
                this.disposalNew.ALARM_TYPE = item.MONITORINGDEVICESENSOR_TYPE
                this.disposalNew.ALARM_LEVEL = '1'
              }
            } else if (Number(item.RANGE2_MIN) <= Number(liquidLevel) && Number(liquidLevel) <= Number(item.RANGE2_MAX)) {
              this.$set(this.pd, 'LIQUIDLEVELCLASS', 'orange')
              this.$set(this.pd, 'LIQUIDLEVEL_RANGEMIN', item.RANGE2_MIN)
              this.$set(this.pd, 'LIQUIDLEVEL_RANGEMAX', item.RANGE2_MAX)
              if (ALARM_LEVEL > 2) {
                ALARM_LEVEL = 2
                this.disposalNew.ALARM_TYPE = item.MONITORINGDEVICESENSOR_TYPE
                this.disposalNew.ALARM_LEVEL = '2'
              }
            } else if (Number(item.RANGE3_MIN) <= Number(liquidLevel) && Number(liquidLevel) <= Number(item.RANGE3_MAX)) {
              this.$set(this.pd, 'LIQUIDLEVELCLASS', 'yellow')
              this.$set(this.pd, 'LIQUIDLEVEL_RANGEMIN', item.RANGE3_MIN)
              this.$set(this.pd, 'LIQUIDLEVEL_RANGEMAX', item.RANGE3_MAX)
              if (ALARM_LEVEL > 3) {
                ALARM_LEVEL = 3
                this.disposalNew.ALARM_TYPE = item.MONITORINGDEVICESENSOR_TYPE
                this.disposalNew.ALARM_LEVEL = '3'
              }
            } else if (Number(item.RANGE4_MIN) <= Number(liquidLevel) && Number(liquidLevel) <= Number(item.RANGE4_MAX)) {
              this.$set(this.pd, 'LIQUIDLEVELCLASS', 'blue')
              this.$set(this.pd, 'LIQUIDLEVEL_RANGEMIN', item.RANGE4_MIN)
              this.$set(this.pd, 'LIQUIDLEVEL_RANGEMAX', item.RANGE4_MAX)
              if (ALARM_LEVEL > 4) {
                ALARM_LEVEL = 4
                this.disposalNew.ALARM_TYPE = item.MONITORINGDEVICESENSOR_TYPE
                this.disposalNew.ALARM_LEVEL = '4'
              }
            } else {
              this.$set(this.pd, 'LIQUIDLEVELCLASS', 'green')
              this.$set(this.pd, 'LIQUIDLEVEL_RANGEMIN', '-')
              this.$set(this.pd, 'LIQUIDLEVEL_RANGEMAX', '-')
            }
            if (ALARM_LEVEL < 10 && this.disposalNew.ALARM_TYPE == item.MONITORINGDEVICESENSOR_TYPE) {
              this.disposalNew.ALARM_VALUE = liquidLevel
              this.disposalNew.ALARM_RANGE_MIN = this.pd.LIQUIDLEVEL_RANGEMIN
              this.disposalNew.ALARM_RANGE_MAX = this.pd.LIQUIDLEVEL_RANGEMAX
            }
            // eslint-disable-next-line no-constant-condition,no-cond-assign
          } else if (item.MONITORINGDEVICESENSOR_TYPE == 'MONITORINGEQUIPMENTTYPE002') { //  温度
            if (Number(item.RANGE1_MIN) <= Number(temperature) && Number(temperature) <= Number(item.RANGE1_MAX)) {
              this.$set(this.pd, 'TEMPERATURECLASS', 'red')
              this.$set(this.pd, 'TEMPERATURE_RANGEMIN', item.RANGE1_MIN)
              this.$set(this.pd, 'TEMPERATURE_RANGEMAX', item.RANGE1_MAX)
              if (ALARM_LEVEL > 1) {
                ALARM_LEVEL = 1
                this.disposalNew.ALARM_TYPE = item.MONITORINGDEVICESENSOR_TYPE
                this.disposalNew.ALARM_LEVEL = '1'
              }
            } else if (Number(item.RANGE2_MIN) <= Number(temperature) && Number(temperature) <= Number(item.RANGE2_MAX)) {
              this.$set(this.pd, 'TEMPERATURECLASS', 'orange')
              this.$set(this.pd, 'TEMPERATURE_RANGEMIN', item.RANGE2_MIN)
              this.$set(this.pd, 'TEMPERATURE_RANGEMAX', item.RANGE2_MAX)
              if (ALARM_LEVEL > 2) {
                ALARM_LEVEL = 2
                this.disposalNew.ALARM_TYPE = item.MONITORINGDEVICESENSOR_TYPE
                this.disposalNew.ALARM_LEVEL = '2'
              }
            } else if (Number(item.RANGE3_MIN) <= Number(temperature) && Number(temperature) <= Number(item.RANGE3_MAX)) {
              this.$set(this.pd, 'TEMPERATURECLASS', 'yellow')
              this.$set(this.pd, 'TEMPERATURE_RANGEMIN', item.RANGE3_MIN)
              this.$set(this.pd, 'TEMPERATURE_RANGEMAX', item.RANGE3_MAX)
              if (ALARM_LEVEL > 3) {
                ALARM_LEVEL = 3
                this.disposalNew.ALARM_TYPE = item.MONITORINGDEVICESENSOR_TYPE
                this.disposalNew.ALARM_LEVEL = '3'
              }
            } else if (Number(item.RANGE4_MIN) <= Number(temperature) && Number(temperature) <= Number(item.RANGE4_MAX)) {
              this.$set(this.pd, 'TEMPERATURECLASS', 'blue')
              this.$set(this.pd, 'TEMPERATURE_RANGEMIN', item.RANGE4_MIN)
              this.$set(this.pd, 'TEMPERATURE_RANGEMAX', item.RANGE4_MAX)
              if (ALARM_LEVEL > 4) {
                ALARM_LEVEL = 4
                this.disposalNew.ALARM_TYPE = item.MONITORINGDEVICESENSOR_TYPE
                this.disposalNew.ALARM_LEVEL = '4'
              }
            } else {
              this.$set(this.pd, 'TEMPERATURECLASS', 'green')
              this.$set(this.pd, 'TEMPERATURE_RANGEMIN', '-')
              this.$set(this.pd, 'TEMPERATURE_RANGEMAX', '-')
            }
            if (ALARM_LEVEL < 10 && this.disposalNew.ALARM_TYPE == item.MONITORINGDEVICESENSOR_TYPE) {
              this.disposalNew.ALARM_VALUE = temperature
              this.disposalNew.ALARM_RANGE_MIN = this.pd.TEMPERATURE_RANGEMIN
              this.disposalNew.ALARM_RANGE_MAX = this.pd.TEMPERATURE_RANGEMAX
            }
          }
        })
        // this.getDisplsal(_this)
        this.listLoading = false
      }).catch((e) => {
        this.listLoading = false
      })
    },
    // 获取最新的有效报警数据
    getDisplsal(_this) {
      this.listLoading = true
      requestFN(
        '/majordangersourcedisposal/findValidateData',
        {
          MAJORDANGERSOURCE_ID: this.pd.MAJORDANGERSOURCE_ID
        }
      ).then((data) => {
        this.listLoading = false
        _this.disposal = Object.assign(_this.disposal, data.varList.length > 0 ? data.varList[0] : {}) // copy obj
        // eslint-disable-next-line one-var
        let message = '', type = ''
        // 当前监测数据等级 高于 库里linechartBI报警数据等级，升级报警信息
        if (_this.disposal.MAJORDANGERSOURCE_DISPOSAL_ID &&
          Number(_this.disposal.ALARM_LEVEL) > Number(_this.disposalNew.ALARM_LEVEL == '' ? '10' : _this.disposalNew.ALARM_LEVEL)) {
          _this.disposal = Object.assign(_this.disposal, _this.disposalNew)
          message = _this.pd.MAJORDANGERSOURCE_NAME + '【' + (_this.disposalNew.ALARM_TYPE == 'MONITORINGEQUIPMENTTYPE001' ? '液位' : '温度') + '】已升级为'
          if (_this.disposalNew.ALARM_LEVEL == '1') {
            message += '一级'
            type = 'error'
          } else if (_this.disposalNew.ALARM_LEVEL == '2') {
            message += '二级'
            type = 'warning'
          } else if (_this.disposalNew.ALARM_LEVEL == '3') {
            message += '三级'
            type = 'warning'
          } else if (_this.disposalNew.ALARM_LEVEL == '4') {
            message += '四级'
            type = 'info'
          }
          message += '预警，请尽快处理'
          // _this.confirm('up')
        } else { // 新增报警数据
          _this.disposal = Object.assign(_this.disposal, _this.disposalNew)
          message = _this.pd.MAJORDANGERSOURCE_NAME + '【' + (_this.disposalNew.ALARM_TYPE == 'MONITORINGEQUIPMENTTYPE001' ? '液位' : '温度') + '】已达'
          if (_this.disposalNew.ALARM_LEVEL == '1') {
            message += '一级'
            type = 'error'
          } else if (_this.disposalNew.ALARM_LEVEL == '2') {
            message += '二级'
            type = 'warning'
          } else if (_this.disposalNew.ALARM_LEVEL == '3') {
            message += '三级'
            type = 'warning'
          } else if (_this.disposalNew.ALARM_LEVEL == '4') {
            message += '四级'
            type = 'info'
          }
          message += '预警，请尽快处理'
        }
        if (type) {
          if (!_this.disposal.MAJORDANGERSOURCE_DISPOSAL_ID) {
            // _this.confirm('add')
          }
          _this.$set(_this, 'hasDisposal', true)
          if (_this.msg) {
            _this.msg.close()
            _this.msg = null
          }
          _this.msg = this.$message({
            message: message,
            type: type,
            showClose: false,
            duration: 0
          })
        }
      }).catch((e) => {
        this.listLoading = false
      })
    },
    // 获取监测数据对接记录（最近30条）
    getStorageTankLogList() {
      this.listLoading = true
      // storagetanklog/list
      requestFN(
        '/homemajor/listStoragetankLog?showCount=5&currentPage=1',
        {
          STORAGETANK_OPERATTIME: 'STORAGETANK' + this.pd.MAJORDANGERSOURCE_STORAGETANK + '_OPERATTIME'
        }
      ).then((data) => {
        this.logList = data.varList
        for (let i = this.logList.length - 1; i >= 0; i--) {
          var item = this.logList[i]
          var j = this.logList.length - 1 - i
          const datatime = item['STORAGETANK' + this.pd.MAJORDANGERSOURCE_STORAGETANK + '_OPERATTIME']
          this.chartData.LIQUIDLEVEL.dataX[j] = datatime.length > 11 ? datatime.substr(11) : datatime
          this.chartData.TEMPERATURE.dataX[j] = datatime.length > 11 ? datatime.substr(11) : datatime
          this.chartData.LIQUIDLEVEL.dataY[0][j] = item['STORAGETANK' + this.pd.MAJORDANGERSOURCE_STORAGETANK + '_LIQUIDLEVEL']
          this.chartData.TEMPERATURE.dataY[0][j] = item['STORAGETANK' + this.pd.MAJORDANGERSOURCE_STORAGETANK + '_TEMPERATURE']
        }
        this.$refs.CHART_LIQUIDLEVEL.renewOption(this.chartData.LIQUIDLEVEL)
        this.$refs.CHART_TEMPERATURE.renewOption(this.chartData.TEMPERATURE)
        this.listLoading = false
      }).catch((e) => {
        this.listLoading = false
      })
    },

    // 查看
    goDisposalList() {
      this.$parent.activeName = 'DisposalList'
    },
    // 获取数据字典数据
    getDict: function() {
      requestFN(
        '/dictionariesCorp/getLevels',
        {
          DICTIONARIES_ID: '6a724d36c3ad416fad22049d932c1987'
        }
      ).then((data) => {
        this.ALARM_TYPE_List = data.list
      }).catch((e) => {

      })
    },
    resetDisposal() {
      this.disposal = { // 报警信息
        MAJORDANGERSOURCE_DISPOSAL_ID: '',
        MAJORDANGERSOURCE_ID: this.id,
        ALARM_TYPE: '', // 报警类型
        ALARM_VALUE: '', // 报警值
        ALARM_LEVEL: '', // 报警级别（1.一级 2.二级 3.三级 4.四级）
        ALARM_RANGE_MIN: '', // 报警阈值下限
        ALARM_RANGE_MAX: '', // 报警阈值上限
        DISPOSAL_TIME: '', // 处置生成时间
        DISPOSAL_PERSON: '', // 处置人
        DISPOSAL_METHOD: '', // 处置方式
        DISPOSAL_DESC: '', // 处置描述
        DISPOSAL_TIME_OVER: '', // 处置完成时间
        disposalBeforeFile: [], // 处置前照片
        disposalAfterFile: [] // 处置后照片
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@mixin table() {
  table {
    width: 100%;
    border-collapse: collapse;
    text-align: center;

    tr {
      td {
        width: 20%;
        border: 2px solid #b1ccec;
        padding: 1.601vh 0;
      }
    }
  }
}
.dialog_body {
  width: 100%;

  .top {
    display: flex;
    padding-bottom: 1.601vh;
    border-bottom: 2px solid #316b8b;

    .top_left {
      flex-basis: 10%;
      display: flex;
      align-items: center;
      flex-wrap: wrap;

      .title {
        text-align: center;
        flex-basis: 100%;
      }

      img {
        height: 10.672vh;
        flex-basis: 100%;
      }
    }

    .top_center {
      flex: 1;
      margin-left: 50px;

      @include table();
    }

    .top_right {
      margin-left: 15px;
      flex-basis: 15%;

      button {
        width: 100%;
        cursor: pointer;
        background-color: rgba(49, 188, 211, 0.7);
        color: #fff;
        border: none;
        border-radius: 3px;
        padding: 1.301vh 0;
        margin: 0.3vh 0;
      }
    }
  }

  .center {
    display: flex;
    justify-content: space-around;
    padding-top: 1.601vh;
    padding-bottom: 1.601vh;
    border-bottom: 2px solid #316b8b;

    #main4, #main5 {
      flex-basis: 80%;
      height: 15.97vh;
    }
  }

  .bottom {
    padding-top: 1.601vh;
    padding-bottom: 1.601vh;
    border-bottom: 2px solid #316b8b;

    .tabs {
      display: flex;
      font-size: 14px;
      margin-bottom: 0.534vh;

      .tab {
        background-color: rgba(58, 78, 115, 0.6);
        padding: 1.5vh 60px;
        border-radius: 3px;
        margin-right: 0.534vh;
        cursor: pointer;

        &.active, &:hover {
          background-color: rgba(45, 143, 173, 0.6);
        }
      }
    }

    @include table();
  }
}
</style>