cellsysArt/components/equData/eqDataForm.vue

<template>
    <el-container style="background-color: #fff">
        <el-main>
            <el-form
                class="dataForm"
                ref="dataForm"
                :rules="rules"
                :model="form"
                label-position="top">
                <el-form-item
                    label="数据名称"
                    prop="name">
                    <el-input
                        v-model="form.name"
                        :readonly="isReadonly"
                        placeholder="请输入数据名称" />
                </el-form-item>
                <el-form-item
                    label="创建时间"
                    prop="dateTime">
                    <el-date-picker
                        :readonly="isReadonly"
                        style="width: 100%"
                        v-model="form.dateTime"
                        type="datetime"
                        value-format="x"
                        :disabled-date="disabledDate"
                        :default-value="defaultValue"
                        placeholder="选择上报时间"></el-date-picker>
                </el-form-item>

                <el-form-item label="标签">
                    <el-tag
                        v-for="tag in form.tags"
                        :key="tag"
                        :closable="!isReadonly"
                        :disable-transitions="false">
                        {{ tag.name }}
                    </el-tag>
                    <el-button
                        v-if="!isReadonly"
                        class="button-new-tag"
                        size="small"
                        @click="handleAddTag">
                        + 添加标签
                    </el-button>
                </el-form-item>
                <el-form-item
                    label="图片附件"
                    prop="data">
                    <imagesUpload
                        ref="ImageUpload"
                        :is-show="isReadonly"
                        :data="uploadDate"
                        @uploadSuccess="uploadSuccess"
                        @uploadChange="uploadChange"
                        :maxSize="9"
                        :fileList="uploadOption.imgList"
                        type="file"></imagesUpload>
                </el-form-item>
                <el-form-item label="材料选择">
                    <materialCard
                        v-model="materialDialogVisible"
                        :material-id="form.materialId"
                        :currentMaterial="currentMaterial"
                        @confirm="selectMaterial"></materialCard>
                    <el-button
                        v-if="!isReadonly"
                        class="button-new-tag"
                        size="small"
                        @click="handleAddMaterial">
                        + 选择材料
                    </el-button>
                </el-form-item>
                <el-form-item
                    prop="destinationGeometry"
                    label="填报地址">
                    <el-input
                        readonly
                        @click="openMap"
                        v-model="geoDialog.currrentAddress"
                        :suffix-icon="ArrowRight"></el-input>
                </el-form-item>
                <el-form-item
                    label="描述"
                    prop="remarks">
                    <el-input
                        :readonly="isReadonly"
                        :rows="4"
                        type="textarea"
                        v-model="form.remarks"></el-input>
                </el-form-item>
                <el-form-item
                    v-if="!isReadonly"
                    label="导入数据"
                    prop="data">
                    <el-upload
                        class="upload-demo"
                        accept=".txt,.csv"
                        :auto-upload="false"
                        :show-file-list="false"
                        :before-upload="handleBeforeUpload"
                        :on-change="handleFileChange">
                        <el-button
                            type="primary"
                            plain>
                            选择txt或csv文件
                        </el-button>
                    </el-upload>
                    <el-button
                        link
                        type="primary"
                        @click="downloadTXT">
                        下载txt模版
                    </el-button>
                    <el-button
                        link
                        type="primary"
                        @click="downloadCSV">
                        下载csv模版
                    </el-button>
                    <p style="width: 100%; color: #999; font-size: 12px">
                        支持上传txt，csv格式的文件
                    </p>
                </el-form-item>
            </el-form>
            <div
                v-if="form.data && form.data.length > 0"
                ref="lineChart"
                style="width: 100%; height: 40vh"></div>
        </el-main>
        <el-footer class="footer-btn">
            <el-button @click="close">取消</el-button>
            <el-button
                type="primary"
                :btnloading="btnloading"
                @click="save">
                完成
            </el-button>
        </el-footer>
        <!--标签选择器-->
        <tagSelect
            :dialogOption="tagSelect"
            :activeTags="form.tags"
            :cellsysOrg="cellsysOrg"
            :isAdmin="isAdmin"
            @handleTagSelect="handleTagSelect"></tagSelect>
        <GeocoderComponent
            v-model="geoDialog.visible"
            :isReadonly="isReadonly"
            :isGetCurrentPosition="false"
            :currentPosition="geoDialog.currentPosition"
            :address="geoDialog.currrentAddress"
            @confirm="handleDialogConfirm"
            @close="handleDialogCancel"></GeocoderComponent>
    </el-container>
</template>

<script>
import ImagesUpload from '../imagesUpload.vue';
import MaterialCard from '../materialCard.vue';
import * as echarts from 'echarts';
import tagSelect from '../tag/tagSelect.vue';
import GeocoderComponent from '../amapSearch.vue';
import ArtSystem from '../../artSystem';
import { ArrowRight } from '@element-plus/icons-vue';
import EquipmentData from '../../equipmentData';

export default {
    name: 'EqDataForm',
    emits: ['close', 'update'],
    components: { GeocoderComponent, tagSelect, MaterialCard, ImagesUpload },
    props: {
        defaultName: String,
        currentEquipment: Object, //cellsysArt的Equipment对象
        currentEquData: Object,
        mode: 'create', //create和details，目前还没有编辑模式
        cellsysOrg: Object,
        isAdmin: Boolean,
    },
    computed: {
        ArrowRight() {
            return ArrowRight;
        },
        uploadDate() {
            return {
                module: 'equipment',
            };
        },
    },
    data() {
        return {
            form: new EquipmentData(),
            rules: {
                dateTime: [{ required: true, message: '请选择时间', trigger: 'blur' }],
            },
            isReadonly: false,
            defaultValue: new Date(),
            uploadOption: {
                filePath: null,
                imgList: [],
            },
            materialDialogVisible: false,
            coordinates: null, //坐标
            tagSelect: {
                visible: false,
            },
            equipment: null, //cellsysArt的equipment对象
            geoDialog: {
                visible: false,
                currentPosition: null, //设备当前所在实验室geometry
                currrentAddress: '', //上报数据所在地点，默认数据填充实验室名称
            },
            btnloading: false,
            currentMaterial: null,
        };
    },
    created() {
        if (this.currentEquipment && this.currentEquipment.id) {
            //项目内弹窗通常由props传递设备信息
            this.equipment = this.currentEquipment;
            this.queryLaboratoryInfo();
            if (this.mode === 'details') {
                this.form = this.currentEquData;
                console.log(this.form, 'currentEquData');
                let { images } = this.form;
                //图片填充
                if (images && images.length > 0) {
                    this.uploadOption.imgList = images.map((item, index) => {
                        return {
                            url: item, // 控件展示的图片用压缩版本
                        };
                    });
                }
                //图表数据填充
                if (this.form.data && this.form.data.length > 0) {
                    this.$nextTick(() => {
                        this.initChart(this.form.data);
                    });
                }
                //材料数据填充
                this.currentEquData.queryqueryMateria().then((res) => {
                    if (res && res.length > 0) {
                        this.currentMaterial = res[0];
                        console.log(this.currentMaterial);
                    }
                });
            } else {
                this.form = new EquipmentData();
                this.form.dateTime = new Date().getTime();
            }
        } else {
            let routerParams = this.$route.query;
            let { id, equipmentId } = routerParams;
            if (equipmentId) {
                //移动端webview通常用url参数传递id
                this.queryEquipment(equipmentId);
            }
            if (id) {
                //从移动端webview的查看详情界面进入逻辑
                this.getEquipmentDataDetail(id);
            }
        }
        if (this.defaultName) {
            this.form.name = this.defaultName;
        }
    },
    methods: {
        //查询设备信息
        queryEquipment(equipmentId) {
            let filter = [
                {
                    name: 'id',
                    operator: '=',
                    value: equipmentId,
                },
            ];
            ArtSystem.queryEquipment({
                filter,
            }).then((equipments) => {
                if (equipments && equipments.length > 0) {
                    this.equipment = equipments[0];

                    this.queryLaboratoryInfo();
                }
            });
        },
        //获取设备数据详细内容
        getEquipmentDataDetail(id) {},
        //获取设备所在实验室信息
        queryLaboratoryInfo() {
            //查询当前设备所在实验室，用于填充默认定位数据
            this.equipment.queryLaboratory().then((laboratorys) => {
                if (laboratorys && laboratorys.length > 0) {
                    let { name, geometry } = laboratorys[0];
                    this.geoDialog.currentPosition = geometry;
                    this.geoDialog.currrentAddress = name;
                }
            });
        },
        handleDialogConfirm(coordinates) {
            this.form.geometry = { type: 'Point', coordinates: coordinates };
            this.coordinates = coordinates;
        },
        handleDialogCancel() {},
        openMap() {
            this.geoDialog.visible = true;
        },
        disabledDate(time) {
            return time.getTime() > Date.now();
        },
        handleAddTag() {
            this.tagSelect.visible = true;
        },
        //图片上传完成
        uploadSuccess(data) {
            this.form['images'] = data.map((item) => {
                return item['imgPath'];
            });
            this.handleSubmit();
        },
        handleTagSelect(tagList) {
            this.form.tags = tagList;
        },
        uploadChange(fileList) {
            //图片部分是否发生变化
            this.isUploadChange = true;
        },
        selectMaterial(materialId) {
            this.form.materialId = materialId;
        },
        handleAddMaterial() {
            this.materialDialogVisible = true;
        },
        handleBeforeUpload(file) {
            const isTxtOrXlsx = file.type === 'text/plain' || file.type === 'text/csv';
            if (!isTxtOrXlsx) {
                this.$message.error('只能上传 txt 或 csv 文件!');
                return false;
            }
            return true;
        },
        handleFileChange(file) {
            // 检查文件类型
            const fileType = file.name.split('.').pop().toLowerCase();
            const reader = new FileReader();
            reader.onload = (e) => {
                // 读取成功后，设置文件内容
                // console.log(e, e.target, e.target.result);
                const dataString = e.target.result;
                // 使用正则表达式分割字符串，得到每一行的数据
                const rows = dataString.split(/\n/);
                // 初始化一个空数组来存储二维数组
                const twoDimensionalArray = [];
                // 遍历每一行数据
                rows.forEach((row) => {
                    // 如果行不是空的，则继续处理
                    if (row) {
                        let values;
                        if (fileType === 'txt') {
                            // 使用't'分割每一行中的两个数值
                            values = row.split('\t');
                        } else {
                            values = row.split(',');
                        }
                        // 将分割后的数值转换为浮点数，并添加到二维数组中
                        twoDimensionalArray.push(values.map(Number));
                    }
                });
                this.form.data = twoDimensionalArray;
                this.$nextTick(() => {
                    this.initChart(twoDimensionalArray);
                });

                // 输出二维数组
                // console.log(twoDimensionalArray);
            };
            reader.onerror = () => {
                this.$message.error('文件读取失败');
            };
            reader.readAsText(file.raw); // 读取文件内容
        },
        downloadTXT() {
            const content =
                '185.551\t16.00\r\n185.939\t16.00\r\n186.327\t16.00\r\n193.318\t16.21\r\n201.097\t15.34\r\n1024.282\t16.31\r'; // 定义模板内容
            const blob = new Blob([content], { type: 'text/plain' });
            const url = URL.createObjectURL(blob);
            // 创建一个a元素用于下载
            const link = document.createElement('a');
            link.href = url;
            link.download = 'txt模板.txt'; // 指定下载文件名
            document.body.appendChild(link);
            link.click();
            // 清理和释放URL对象
            document.body.removeChild(link);
            URL.revokeObjectURL(url);
        },
        downloadCSV() {
            const content =
                '185.551,16.00\r\n185.939,16.00\r\n186.327,16.00\r\n192.318,16.21\r\n201.097,15.34\r\n1024.282,16.31\r'; // CSV内容，字段以逗号分隔，记录以回车换行分隔
            const blob = new Blob([content], { type: 'text/csv;charset=utf-8;' });
            const url = URL.createObjectURL(blob);
            const link = document.createElement('a');
            link.href = url;
            link.download = 'csv_template.csv'; // 指定下载文件名，使用.csv扩展名
            document.body.appendChild(link);
            link.click();
            // 清理和释放URL对象
            document.body.removeChild(link);
            URL.revokeObjectURL(url);
        },
        initChart(data) {
            const chart = echarts.init(this.$refs.lineChart);
            const option = {
                tooltip: {
                    trigger: 'axis',
                    formatter: function (params) {
                        // params 是一个包含当前数据点信息的数组
                        // 对于 line 图表，通常 params[0] 就是我们需要的信息
                        return `X:${params[0].value[0]}, Y: ${params[0].value[1]}`;
                    },
                },
                xAxis: {
                    type: 'value',
                },
                yAxis: {
                    type: 'value',
                },
                series: [
                    {
                        data: data,
                        type: 'line',
                        showSymbol: false,
                    },
                ],
            };
            if (this.equipment.chartConfiguration) {
                let chartConfiguration = this.equipment.chartConfiguration;

                option.xAxis.name =
                    chartConfiguration.xAxis.key + '(' + chartConfiguration.xAxis.unit + ')';
                option.xAxis.nameLocation = 'end';

                option.yAxis.name =
                    chartConfiguration.yAxis.key + '(' + chartConfiguration.yAxis.unit + ')';
                option.yAxis.nameLocation = 'end';
            }
            chart.setOption(option);
        },
        close() {
            this.materialDialogVisible = false;
            this.$emit('close');
        },
        save() {
            this.form.geometry = this.geoDialog.currentPosition;
            this.btnloading = true;
            //有图片先上传图，没有则直接提交
            if (this.isUploadChange) {
                this.$refs.ImageUpload.submitUpload();
            } else {
                this.handleSubmit();
            }
        },
        handleSubmit() {
            let newEqData;
            this.equipment
                .createEquipmentData(this.form)
                .then((res) => {
                    // console.log(res);
                    newEqData = res;
                    if (this.form.tags) {
                        return this.updateTagRel(res.id);
                    }
                })
                .then(() => {
                    this.$message.success('数据填报成功');
                    this.$emit('update', newEqData);
                    //todo 操作成功后给移动端的反馈
                })
                .catch((error) => {
                    console.error(error);
                    this.$message.error(error.message);
                })
                .finally(() => {
                    this.btnloading = false;
                });
        },
        updateTagRel(id) {
            return this.cellsysOrg.updateTagRel({
                tags: this.form.tags,
                modelCode: 'artworkEquipmentData',
                modelObjectId: id,
            });
        },
    },
};
</script>

<style scoped>
.footer-btn {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
</style>