wszhyWx/src/views/manage/dataDevice.vue

<template>
  <div class="dataDevice manage-page">
    <div class="table-title">
      <img src="../../assets/manageImg/dataDevice.png" alt="">大数据设备信息
    </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码" width="180px">
        </el-table-column>
        <el-table-column prop="greenhouseName" label="设备名称">
        </el-table-column>
        <el-table-column prop="greenhouseVariety" label="品种">
        </el-table-column>
        <el-table-column prop="greenhouseNums" label="数量">
        </el-table-column>
        <el-table-column prop="growthStageName" label="生长阶段">
          <template slot-scope="scope">
            <div class="table-flex">
              <div class="table-type">
                {{ scope.row.growthStageName }}
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <div class="table-flex">
              <div class="table-operate blue" @click="openModel(scope.row)">
                <img src="../../assets/manageImg/table-edit.png" alt="">编辑
              </div>
              <!-- <el-popconfirm title="这一段内容确定删除吗？">
                <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 :close-on-click-modal="false" title="提示" top="10vh" :visible.sync="addModel" width="700px"
      class="vrcode-model manage-model" :append-to-body="true">
      <div class="vrcode-model-title">
        编辑
      </div>
      <div class="vrcode-content" v-if="nowData">
        <div class="manage-left">
          <!-- <div class="manage-input">
                        <div class="input-title">设备code码</div>
                        <input type="text" v-model="nowData.deviceId" 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 class="manage-input">
            <div class="input-title">品种</div>
            <input type="text" v-model="nowData.greenhouseVariety" placeholder="请输入品种">
          </div>
          <div class="manage-input">
            <div class="input-title">生长阶段</div>
            <input type="text" v-model="nowData.growthStageName" placeholder="请输入生长阶段">
          </div>
          <div class="manage-input">
            <div class="input-title">设备名称</div>
            <input type="text" v-model="nowData.greenhouseName" placeholder="请输入设备名称">
          </div>
          <div class="manage-input">
            <div class="input-title">数量</div>
            <input type="text" v-model="nowData.greenhouseNums" placeholder="请输入数量">
          </div>
        </div>
        <div class="manage-right">
          <div class="manage-img">
            <label for="sel-img">
              <img class="" :src="nowData.greenhouseImage" alt="">
            </label>
            <input ref="fileInput" type="file" :multiple="false" id="sel-img" accept="image/*"
              @change="handleImageChange($event, 0)" />
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <div class="vrcode-btn blue-btn w-100" @click="confirmModel">确定</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: null,
      typeSelList: [],
    }
  },
  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.bigDataControls
          this.typeSelList=[]
          res.data.data.devices.forEach((el, index) => {
            if (el.deviceName == 10) {
              this.typeSelList.push(el)
            }
          })
        }
      })
    },
    getData1(data) {
      var name = ''
      this.typeSelList.forEach((el, index) => {
        if (el.deviceId == data) {
          name = el.deviceTypeName
        }
      })
      return name
    },
    handleCommand(e) {
      this.nowData.deviceId = e
    },
    confirmModel() {
      this.loading = this.$loading({
        lock: true,
        text: '加载中',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      var data = this.nowData
      this.api.updateDataDevice(data).then(res => {
        this.loading.close()
        if (res.data.code == 200) {
          this.dataInit()
          this.$message.success(res.data.msg);
          this.addModel = false
        } else {
          this.$message.error(res.data.msg);
          this.addModel1 = false
        }
      })
    },
    openModel(item) {
      this.nowData = JSON.parse(JSON.stringify(item))
      this.addModel = true
    },
    handleImageChange(event, type) {
      this.loading = this.$loading({
        lock: true,
        text: '上传中',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      const file = event.target.files[0];
      const reader = new FileReader();
      reader.onload = (e) => {
        const imageData = e.target.result;
        const convertedFile = new File([imageData], file.name, { type: file.type });
        // 处理转换后的文件...

        var data = { file: convertedFile }
        this.api.manageUploadImage(data).then(res => {
          this.loading.close()
          if (res.data.code == 200) {
            this.nowData.greenhouseImage = res.data.msg
            this.$refs.fileInput.value = '';

          } else {

          }
        })
      };
      reader.readAsArrayBuffer(file);

    },
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 == 1) {
        return 'warning-row';
      } else if (rowIndex % 2 == 0) {
        return 'success-row';
      }
      return '';
    }
  },

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