wszhyWx/src/views/manage/weatherData.vue

<template>
  <div class="videoManage manage-page ">
    <div class="flex-view flex-title">
      <div class="table-title">
        <img src="../../assets/manageImg/deviceManage.png" alt="">设备绑定气象站数据
      </div>
      <div class="table-title-btn blue" @click="openModel({}, 0)">
        <img src="../../assets/manageImg/add-btn.png" alt="">添加
      </div>
    </div>
    <div class="table-view">
      <el-table :data="tableData" :row-class-name="tableRowClassName" height="620" style="width: 100%">
        <el-table-column prop="deviceId" label="关联气象站设备code码">
        </el-table-column>
        <!-- <el-table-column prop="data2" label="关联气象站设备名称">
        </el-table-column> -->
        <el-table-column prop="deviceName" label="关联气象站名称">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <div class="table-flex">
              <div class="table-operate blue" @click="openModel(scope.row, 1)">
                <img src="../../assets/manageImg/table-edit.png" alt="">编辑
              </div>
              <el-popconfirm @confirm="confirmDel(scope.row)" title="这一段内容确定删除吗？" icon-color="red">
                <div class="table-operate red" slot="reference">
                  <img src="../../assets/manageImg/table-delete.png" alt="">删除
                </div>
              </el-popconfirm>

            </div>

          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog title="提示" top="10vh" :visible.sync="addModel" width="564px" class="vrcode-model manage-model"
      :append-to-body="true">
      <div class="vrcode-model-title">
        {{ modelName }}
      </div>
      <div class="vrcode-content">
        <div class="manage-left">
          <!-- <div class="manage-input">
            <div class="input-title">关联气象站设备code码</div>
            <input type="text" v-model="nowData.deviceId" :disabled="modelName == '编辑' ? true : false"
              placeholder="请输入设备code码">
          </div> -->
          <div class="manage-input-sel">
            <div class="input-title">关联气象站设备code码</div>
            <el-dropdown @command="handleCommand">
              <div class="el-dropdown-link">
                <input v-model="nowData.deviceId" type="text" class="input-input" placeholder="请选择气象站设备code码">
                <div class="arrow"><img src="../../assets/image/arrow.png" alt=""></div>
              </div>
              <el-dropdown-menu slot="dropdown" class="manage-dropdown">
                <el-dropdown-item v-for="item, index in typeSelList
                " :key="index" :command="item.deviceId">{{ item.deviceTypeName}}</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </div>
        <div class="manage-right">
          <div class="manage-input">
            <div class="input-title">关联气象站名称</div>
            <input type="text" v-model="nowData.deviceName" placeholder="请输入气象站名称">
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <div class="vrcode-btn blue-btn w-100" @click="confirmBtn">确定</div>
        <div class="vrcode-btn cancle-btn w-100" @click="addModel = false">取消</div>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tableData: [],
      addModel: false,
      nowData: { deviceId: '', deviceName: '' },
      modelName: '添加',
      typeSelList: [],
      TypeSel: '',
      selId:'',

    }
  },
  mounted() { this.dataInit() },
  methods: {
    dataInit() {

      var user = JSON.parse(localStorage.getItem('userInfo'))
      this.api.selUserbyid(user.userid).then(res => {

        if (res.data.code == 200) {
          this.tableData = res.data.data.equipments
          this.typeSelList=[] 
          res.data.data.devices.forEach((el,index)=>{
            if(el.deviceName!=30){
              this.typeSelList.push(el)
            }
          })
        }
      })
    },
    openModel(item, type) {
      if (type == 0) {
        this.modelName = '添加'
        this.addModel = true
        this.nowData= { deviceId: '', deviceName: '' }
      } else {
        this.modelName = '编辑'
        this.nowData = JSON.parse(JSON.stringify(item))
        this.addModel = true
      }
    },
    confirmBtn() {
      this.loading = this.$loading({
        lock: true,
        text: '加载中',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      var user = JSON.parse(localStorage.getItem('userInfo'))
      var data = { ...this.nowData, userId: user.userid }
      if (this.modelName == '编辑') {
        this.api.updatephoneeqData(data).then(res => {
          this.loading.close()
          if (res.data.code == 200) {
            this.dataInit()
            this.addModel = false
          } else {
            this.$message.error(res.data.msg);
            this.addModel = false
          }
        })
      } else {
        this.api.addphoneeqData(data).then(res => {
          this.loading.close()
          if (res.data.code == 200) {
            this.dataInit()
            this.addModel = false
          } else {
            this.$message.error(res.data.msg);
            this.addModel = false
          }
        })
      }
    },
    getData1(data) {
            var name = ''
            this.typeSelList.forEach((el, index) => {
                if (el.deviceId == data) {
                    name = el.deviceTypeName
                }
            })
            return name
        },
    handleCommand(e) {
     this.nowData.deviceId= e
},
confirmDel(item){
  var data={id:item.id}
  this.api.delphoneeqData(data).then(res=>{
    if (res.data.code == 200) {
            this.dataInit()
            this.$message.success(res.data.msg);
          } else {
            this.$message.error(res.data.msg);
          }
  })
},
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 == 1) {
        return 'warning-row';
      } else if (rowIndex % 2 == 0) {
        return 'success-row';
      }
      return '';
    }
  },

}
</script>
<style lang="scss"></style>