添加本地矢量地图服务，初始化视角切换

suerprisePlus

2024-08-21 7d57b0fef0f220dfe7c868ce1113a7ce6eb6c468

 src/views/dataManager/equipMante/AddOrUpdate.vue

@@ -1,55 +1,68 @@
<template>
    <el-dialog :title="!dataForm.id ? '新增' : '修改'" :close-on-click-modal="false" :visible.sync="visible">
    <el-dialog  :before-close="closeHandler" :title="!dataForm.id ? '新增' : '修改'" :close-on-click-modal="false" :visible.sync="visible">
        <el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataFormSubmit()"
            label-width="120px">
            <el-form-item label="客户名称" prop="cName">
                <el-input v-model="dataForm.cName" placeholder="客户名称"></el-input>
            <el-form-item label="客户名称" prop="c_name">
                <el-input v-model="dataForm.c_name" placeholder="客户名称"></el-input>
            </el-form-item>
            <el-form-item label="故障地点名称" prop="fName">
                <el-input v-model="dataForm.fName" placeholder="故障地点名称"></el-input>
            <el-form-item label="故障地点名称" prop="f_name">
                <el-input v-model="dataForm.f_name" placeholder="故障地点名称"></el-input>
            </el-form-item>
            <el-form-item label="故障地点经纬度" prop="fLocation">
                <el-input v-model="dataForm.fLocation" placeholder="故障地点经纬度"></el-input>
            <el-form-item label="故障地点经纬度" prop="f_location">
                <el-input v-model="dataForm.f_location" placeholder="故障地点经纬度"></el-input>
            </el-form-item>
            <el-form-item label="联系电话" prop="fPhone">
                <el-input v-model="dataForm.fPhone" placeholder="联系电话"></el-input>
            <el-form-item label="联系电话" prop="f_phone">
                <el-input v-model="dataForm.f_phone" placeholder="联系电话"></el-input>
            </el-form-item>
            <el-form-item label="故障时间" prop="fDate">
                <el-input v-model="dataForm.fDate" placeholder="故障时间"></el-input>
            <el-form-item label="故障时间" prop="f_date">
                <el-date-picker style="width:100%" @change="handleDateChange" v-model="dataForm.f_date" type="datetime"
                    placeholder="选择故障时间">
                </el-date-picker>
                <!-- <el-input v-model="dataForm.f_date" placeholder="故障时间"></el-input> -->
            </el-form-item>
            <el-form-item label="报修方式" prop="fType">
                <el-input v-model="dataForm.fType" placeholder="报修方式"></el-input>
            <el-form-item label="报修方式" prop="f_type">
                <el-input v-model="dataForm.f_type" placeholder="报修方式"></el-input>
            </el-form-item>
            <el-form-item label="记录人" prop="fMan">
                <el-input v-model="dataForm.fMan" placeholder="记录人"></el-input>
            <el-form-item label="记录人" prop="f_man">
                <el-input v-model="dataForm.f_man" placeholder="记录人"></el-input>
            </el-form-item>
            <el-form-item label="报修内容" prop="fContent">
                <el-input v-model="dataForm.fContent" placeholder="报修内容"></el-input>
            <el-form-item label="报修内容" prop="f_content">
                <el-input v-model="dataForm.f_content" placeholder="报修内容"></el-input>

            </el-form-item>
            <el-form-item label="到达现场时间" prop="rDate">
                <el-input v-model="dataForm.rDate" placeholder="到达现场时间"></el-input>
            <el-form-item label="到达现场时间" prop="r_date">
                <!-- <el-input v-model="dataForm.r_date" placeholder="到达现场时间"></el-input> -->
                <el-date-picker style="width:100%" @change="handleDateChange" v-model="dataForm.r_date" type="datetime"
                    placeholder="选择达现场时间">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="维修结束时间" prop="reDate">
                <el-input v-model="dataForm.reDate" placeholder="维修结束时间"></el-input>
            <el-form-item label="维修结束时间" prop="re_date">
                <!-- <el-input v-model="dataForm.re_date" placeholder="维修结束时间"></el-input> -->
                <el-date-picker style="width:100%" @change="handleDateChange" v-model="dataForm.re_date" type="datetime"
                    placeholder="选择维修结束时间">
                </el-date-picker>
            </el-form-item>
            <el-form-item label="维修轨迹" prop="rePosition">
                <el-input v-model="dataForm.rePosition" placeholder="维修轨迹"></el-input>
            <el-form-item label="维修轨迹" prop="re_position">
                <el-input v-model="dataForm.re_position" placeholder="维修轨迹"></el-input>
            </el-form-item>
            <el-form-item label="维修视频" prop="reVideo">
                <el-input v-model="dataForm.reVideo" placeholder="维修视频"></el-input>
            <el-form-item label="维修视频" prop="re_video">
                <el-input v-model="dataForm.re_video" placeholder="维修视频"></el-input>
            </el-form-item>
            <el-form-item label="客户评价" prop="reEvaluation">
                <el-input v-model="dataForm.reEvaluation" placeholder="客户评价"></el-input>
            <el-form-item label="客户评价" prop="re_evaluation">
                <el-input v-model="dataForm.re_evaluation" placeholder="客户评价"></el-input>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="visible = false">取消</el-button>
            <el-button @click="closeHandler">取消</el-button>
            <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
        </span>
    </el-dialog>
</template>

<script>

// POINT (112.56978672907 37.8558881392881)
// LINESTRING (112.56610139210423 37.87199523758289, 112.56777608401627 37.87190547038274, 112.56775238085118 37.862274562096125, 112.56829544919117 37.862166910066264, 112.56829523145755 37.85994297223096, 112.56836294214209 37.858185324275034, 112.56874759228823 37.858023871243766, 112.56890584253452 37.85671457963388, 112.57008241825407 37.85633780011934, 112.56994660283333 37.85596117981906)
import { faultreport_save, faultreport_update } from '@/api/mapView/peiwang.js';
export default {
    data() {
@@ -57,68 +70,123 @@
            visible: false,
            dataForm: {
                id: undefined,
                cName: '',
                fName: '',
                fLocation: '',
                fPhone: '',
                fDate: '',
                fType: '',
                fMan: '',
                fContent: '',
                rDate: '',
                reDate: '',
                rePosition: '',
                reVideo: '',
                reEvaluation: ''
                c_name: '',
                f_name: '',
                f_location: '',
                f_phone: '',
                f_date: '',
                f_type: '',
                f_man: '',
                f_content: '',
                r_date: '',
                re_date: '',
                re_position: '',
                re_video: '',
                re_evaluation: ''
            },
            objData: null,
            dataRule: {
                cName: [
                c_name: [
                    { required: true, message: '客户名称不能为空', trigger: 'blur' }
                ],
                fName: [
                f_name: [
                    { required: true, message: '故障地点名称不能为空', trigger: 'blur' }
                ],
                fLocation: [
                f_location: [
                    { required: true, message: '故障地点经纬度不能为空', trigger: 'blur' }
                ],
                fPhone: [
                f_phone: [
                    { required: true, message: '联系电话不能为空', trigger: 'blur' }
                ],
                fDate: [
                f_date: [
                    { required: true, message: '故障时间不能为空', trigger: 'blur' }
                ],
                fType: [
                f_type: [
                    { required: true, message: '报修方式不能为空', trigger: 'blur' }
                ],
                fMan: [
                f_man: [
                    { required: true, message: '记录人不能为空', trigger: 'blur' }
                ],
                fContent: [
                f_content: [
                    { required: true, message: '报修内容不能为空', trigger: 'blur' }
                ],
                rDate: [
                r_date: [
                    { required: true, message: '到达现场时间不能为空', trigger: 'blur' }
                ],
                reDate: [
                re_date: [
                    { required: true, message: '维修结束时间不能为空', trigger: 'blur' }
                ],
                rePosition: [
                re_position: [
                    { required: true, message: '维修轨迹不能为空', trigger: 'blur' }
                ],
                reVideo: [
                    { required: true, message: '维修视频不能为空', trigger: 'blur' }
                ],
                reEvaluation: [
                    { required: true, message: '客户评价不能为空', trigger: 'blur' }
                ]

            }
        }
    },
    methods: {
        handleDateChange(value, picker) {
            return this.getNowTime(value)
        },
        getNowTime(res) {
            var now = null;
            if (res) {
                now = new Date(res);
            } else {
                now = new Date();
            }
            const year = now.getFullYear();
            const month = now.getMonth() + 1; // 月份是从0开始的
            const day = now.getDate();
            const hours = now.getHours();
            const minutes = now.getMinutes();
            const seconds = now.getSeconds();
            // 格式化月份和日期，保持两位数
            const formattedMonth = month < 10 ? '0' + month : month;
            const formattedDay = day < 10 ? '0' + day : day;
            const formattedHours = hours < 10 ? '0' + hours : hours;
            const formattedMinutes = minutes < 10 ? '0' + minutes : minutes;
            const formattedSeconds = seconds < 10 ? '0' + seconds : seconds;
            return `${year}-${formattedMonth}-${formattedDay} ${formattedHours}:${formattedMinutes}:${formattedSeconds}`;

        },
        init(response) {
            this.visible = true
            this.objData = null
            this.dataForm = {
                id: undefined,
                c_name: '',
                f_name: '',
                f_location: '',
                f_phone: '',
                f_date: this.getNowTime(),
                f_type: '',
                f_man: '',
                f_content: '',
                r_date: this.getNowTime(),
                re_date: this.getNowTime(),
                re_position: '',
                re_video: '',
                re_evaluation: ''
            }
            if (response) {
                this.dataForm = { ...response }

                this.objData = { ...response }
                this.dataForm = {
                    id: this.objData.id,
                    c_name: this.objData.c_name,
                    f_name: this.objData.f_name,
                    f_location: this.objData.f_location,
                    f_phone: this.objData.f_phone,
                    f_date: this.objData.f_date,
                    f_type: this.objData.f_type,
                    f_man: this.objData.f_man,
                    f_content: this.objData.f_content,
                    r_date: this.objData.r_date,
                    re_date: this.objData.re_date,
                    re_position: this.objData.re_position,
                    re_video: this.objData.re_video,
                    re_evaluation: this.objData.re_evaluation
                }
            }

        },
@@ -127,32 +195,75 @@
            this.$refs['dataForm'].validate((valid) => {
                if (valid) {
                    if (this.dataForm.id) {
                        this.setEditReport();
                        this.setEditReport(valid);
                    } else {
                        this.setSaveReport();
                    }
                }
            })
        },
        formateDate(res) {

            if (typeof res == 'string') return res;
            return this.getNowTime(res)
        },
        closeHandler(){
            this.visible = false
            this.$emit('refreshDataList')
        },
        setSaveReport() {
            faultreport_save(this.dataForm).then(response => {
                console.log(response);
                // this.$message({
                //   message: '操作成功',
                //   type: 'success',
                //   duration: 1500,
                //   onClose: () => {
                //     this.visible = false
                //     this.$emit('refreshDataList')
                //   }
                // })
            const obj = { ...this.dataForm }
            obj.f_date = this.formateDate(obj.f_date)
            obj.r_date = this.formateDate(obj.r_date)
            obj.re_date = this.formateDate(obj.re_date)
            faultreport_save(obj).then(response => {
                 this.closeHandler();
                if (response.data.msg == 'success') {
                    this.$message({
                        message: '操作成功',
                        type: 'success',
                        duration: 1000,
                        
                    })
                } else {
                    this.$message({
                        message: '操作失败',
                        type: 'warning',
                        duration: 1000,
                       
                    })
                }

            })
        },
        setEditReport() {
            faultreport_update(this.dataForm).then(response => {
                console.log(response);
            const obj = { ...this.dataForm }
            obj.f_date = this.formateDate(obj.f_date)
            obj.r_date = this.formateDate(obj.r_date)
            obj.re_date = this.formateDate(obj.re_date)
            faultreport_update(obj).then(response => {
                 this.closeHandler();
                if (response.data.msg == 'success') {
                    this.$message({
                        message: '操作成功',
                        type: 'success',
                        duration: 1000,
                        
                    })
                } else {
                    this.$message({
                        message: '操作失败',
                        type: 'warning',
                        duration: 1000,
                       
                    })
                }

            })




        },