215 lines
8.0 KiB
Vue
215 lines
8.0 KiB
Vue
<template>
|
|
<div class="dataDevice manage-page">
|
|
<div class="table-title">
|
|
<img src="../../assets/manageImg/dataDevice.png" alt="">
|
|
{{ $t('bigDataDevice.title') }}
|
|
</div>
|
|
<div class="table-view">
|
|
<el-table :data="tableData" :row-class-name="tableRowClassName" height="620" style="width: 100%">
|
|
<el-table-column prop="deviceId" :label="$t('bigDataDevice.tableHeaders.deviceCode')" width="180px">
|
|
</el-table-column>
|
|
<el-table-column prop="greenhouseName" :label="$t('bigDataDevice.tableHeaders.deviceName')">
|
|
</el-table-column>
|
|
<el-table-column prop="greenhouseVariety" :label="$t('bigDataDevice.tableHeaders.variety')">
|
|
</el-table-column>
|
|
<el-table-column prop="greenhouseNums" :label="$t('bigDataDevice.tableHeaders.quantity')">
|
|
</el-table-column>
|
|
<el-table-column prop="growthStageName" :label="$t('bigDataDevice.tableHeaders.growthStage')">
|
|
<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="$t('bigDataDevice.tableHeaders.operations')">
|
|
<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="">
|
|
{{ $t('bigDataDevice.tableHeaders.edit') }}
|
|
</div>
|
|
<!-- 如果需要删除功能 -->
|
|
<!-- <el-popconfirm :title="$t('bigDataDevice.dialog.deleteConfirmation')">
|
|
<div class="table-operate red" slot="reference">
|
|
<img src="../../assets/manageImg/table-delete.png" alt="">
|
|
{{ $t('bigDataDevice.tableHeaders.delete') }}
|
|
</div>
|
|
</el-popconfirm> -->
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</div>
|
|
<el-dialog :close-on-click-modal="false" :title="$t('bigDataDevice.dialog.title')" top="10vh"
|
|
:visible.sync="addModel" width="700px" class="vrcode-model manage-model" :append-to-body="true">
|
|
<div class="vrcode-model-title">
|
|
{{ $t('bigDataDevice.dialog.title') }}
|
|
</div>
|
|
<div class="vrcode-content" v-if="nowData">
|
|
<div class="manage-left">
|
|
<div class="manage-input-sel">
|
|
<div class="input-title">{{ $t('bigDataDevice.tableHeaders.deviceCode') }}</div>
|
|
<el-dropdown @command="handleCommand">
|
|
<div class="el-dropdown-link">
|
|
<input v-model="nowData.deviceId" type="text" class="input-input"
|
|
:placeholder="$t('bigDataDevice.dialog.deviceCodePlaceholder')">
|
|
<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">{{ $t('bigDataDevice.tableHeaders.variety') }}</div>
|
|
<input type="text" v-model="nowData.greenhouseVariety"
|
|
:placeholder="$t('bigDataDevice.dialog.varietyPlaceholder')">
|
|
</div>
|
|
<div class="manage-input">
|
|
<div class="input-title">{{ $t('bigDataDevice.tableHeaders.growthStage') }}</div>
|
|
<input type="text" v-model="nowData.growthStageName"
|
|
:placeholder="$t('bigDataDevice.dialog.growthStagePlaceholder')">
|
|
</div>
|
|
<div class="manage-input">
|
|
<div class="input-title">{{ $t('bigDataDevice.tableHeaders.deviceName') }}</div>
|
|
<input type="text" v-model="nowData.greenhouseName"
|
|
:placeholder="$t('bigDataDevice.dialog.deviceNamePlaceholder')">
|
|
</div>
|
|
<div class="manage-input">
|
|
<div class="input-title">{{ $t('bigDataDevice.tableHeaders.quantity') }}</div>
|
|
<input type="text" v-model="nowData.greenhouseNums"
|
|
:placeholder="$t('bigDataDevice.dialog.quantityPlaceholder')">
|
|
</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">{{$t('index.confirm')}}</div>
|
|
<div class="vrcode-btn cancle-btn w-100" @click="addModel = false">{{$t('index.cancel')}}</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: this.$t('message.loading'),
|
|
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: this.$t('message.uploading'),
|
|
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 {
|
|
this.$refs.fileInput.value = "";
|
|
this.$message.error(res.data.msg);
|
|
}
|
|
}).catch((err) => {
|
|
this.loading = false;
|
|
this.$refs.fileInput.value = "";
|
|
this.$message.error("插入图片失败");
|
|
});
|
|
};
|
|
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> |