pipelineView.vue

<template>
  <el-dialog
    :title="myTitle"
    :visible.sync="dialogVisible"
    :before-close="handleClose"
  >
    <el-row>
      <el-form
        :rules="rules"
        ref="editForm"
        :model="editForm"
        label-width="135px"

      >
        <el-col>
          <el-form-item v-show="false" label="管道id" prop="pipeId">
            <el-input
              disabled
              class="el-input"
              v-model="editForm.pipeId"
            ></el-input>
          </el-form-item>
        </el-col>

        <el-col>
          <el-form-item v-show="false" label="企业id" prop="enterpriseId">
            <el-input disabled v-model="editForm.enterpriseId"></el-input>
          </el-form-item>
        </el-col>

        <el-col
          ><el-form-item label="管道名称" prop="pipeName">
            <el-input v-model="editForm.pipeName"></el-input> </el-form-item
        ></el-col>

        <el-col :span="11">
          <el-form-item label="管道编号" prop="pipeCode">
            <el-input v-model="editForm.pipeCode"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="11">
          <el-form-item label="管道长度" prop="pipeLength">
            <el-input type="number" min="0" v-model="editForm.pipeLength">
              <i
                slot="suffix"
                style="color: #000; font-style: normal; margin-right: 10px"
                >米</i
              >
            </el-input>
          </el-form-item>
        </el-col>
        <el-col>
          <el-form-item label="管道所在地址" prop="pipeAddr">
            <el-input v-model="editForm.pipeAddr"></el-input>
          </el-form-item>
        </el-col>
        <el-col>
          <el-form-item label="经纬度坐标" prop="coordinates">
            <el-card class="box-card">
              <div v-text="lnglatsArr"></div>
              <!-- [<span
              v-for="(item, index) in lnglatsArr"
              :key="index"
              class="text item"
            >

              {{`[${item[0]},${item[1]}],`}}
            </span>] -->
            </el-card>
          </el-form-item>
        </el-col>
        <el-col>
          <el-form-item label="管道类型" prop="pipeType">
            <!-- 下拉 -->

            <el-radio-group v-model="editForm.pipeType">
              <el-radio label="1">地埋管线</el-radio>
              <el-radio label="2">地表管线</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col>
          <el-form-item label="管道压力" prop="pipePressure">
            <!-- select -->
            <el-radio-group v-model="editForm.pipePressure">
              <!-- 1低压，2中压，3次高压，4高压 -->
              <el-radio label="1">低压</el-radio>
              <el-radio label="2">中压</el-radio>
              <el-radio label="3">次高压</el-radio>
              <el-radio label="4">高压</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col>
          <el-form-item label="上传图片" prop="iconUrl">
            <MyFileUpload
              listType="picture-card"
              @resFun="fileFinshed"
              @remove="listRemove"
              :fileArr="fileArr"
            />
            <el-input
              v-show="false"
              disabled
              v-model="editForm.iconUrl"
            ></el-input>
          </el-form-item>
          <!-- <el-form-item v-show="false" label="设备图片路径" prop="iconUrl"> -->
          <!-- </el-form-item> -->
        </el-col>
        <!-- <el-col>
         
        </el-col> -->
        <el-col>
          <el-form-item label="安装日期" prop="installationTime">
            <el-col :span="11">
              <el-date-picker
                type="date"
                placeholder="选择日期"
                style="width: 100%"
                v-model="editForm.installationTime"
              ></el-date-picker>
            </el-col>
          </el-form-item>
        </el-col>
        <!-- <el-col>
        <el-form-item label="最后巡检日期" prop="inspectionTime">
          <el-col :span="11">
            <el-date-picker
              type="date"
              placeholder="选择日期"
              style="width: 100%"
              v-model="editForm.inspectionTime"
            ></el-date-picker>
          </el-col>
        </el-form-item>
      </el-col> -->
        <el-col>
          <el-form-item label="备注信息" prop="remarks">
            <el-input v-model="editForm.remarks" type="textarea"></el-input>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>

    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button :loading="okLoading" type="primary" @click="ok"
        >确 定</el-button
      >
    </span>
  </el-dialog>
</template>
<script>
import MyFileUpload from "@/components/MyFileUpload";
import { addPipe, updatePipe } from "@/api/device/pipe.js";
import { getString } from "@/utils/gassafety.js";
import moment from "moment";
export default {
  props: {
    lineData: {
      type: Object,
      // default:{}
    },
    // 经纬度路径
    lnglatsArr: {
      type: Array,
    },
    // 管道长度
    pipeLength: { type: Number },
    title: { type: String },
    //回调函数
    lineOkCallBack: { type: Function },
    gaodeMap: { type: Object },
    target: { type: Object },
    //message: { type: String },
    //duration: { type: Number, default: 2000 }
  },
  components: {
    MyFileUpload,
  },

  data() {
    return {
      // isShow: false,
      okLoading: false,
      fileArr: [],
      editForm: {
        pipeName: "",
        pipeType: "1",
        pipePressure: "1",
        iconUrl: "",
      },
      dialogVisible: false,
      rules: {
        pipeName: [
          { required: true, message: "请输入管道名称", trigger: "blur" },
          // { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        pipeCode: [
          { required: true, message: "请输入管道编号", trigger: "blur" },
        ],
        pipeLength: [
          { required: true, message: "请输入管道长度", trigger: "blur" },
        ],
        pipeAddr: [
          { required: true, message: "请输入管道所在地址", trigger: "blur" },
        ],
        pipeType: [
          { required: true, message: "请选择管道类型", trigger: "blur" },
        ],
        pipePressure: [
          { required: true, message: "请选择管道压力", trigger: "blur" },
        ],
        iconUrl: [{ required: true, message: "请上传图片", trigger: "change" }],
        installationTime: [
          {
            // type: "date",
            required: true,
            message: "请选择日期",
            trigger: "change",
          },
        ],
      },
    };
  },
  computed:{
    myTitle(){
      if(this.editForm.pipeId){
        return `修改管道信息`
      }else{
        return `新增管道信息`
      }
    }
  },
  created() {
    console.log("lineData", this.lineData, this.lnglatsArr, this.pipeLength);
    if (this.lineData?.pipeId) {
      this.editForm = { ...this.lineData };
    } else {
      // 如果是新建的里面天蝎过东西就存档
      console.log("内部lineDate", this.target.getExtData());
      const { lineData } = this.target.getExtData();
      console.log(lineData)
      if (lineData) {
        this.editForm = { ...lineData };
      }
    }
    this.editForm.coordinates = getString(this.lnglatsArr);
    // 如果有图片路径就赋显，如果没有就啥也没有
    this.fileArr = this.editForm?.iconUrl
      ? [{ url: this.editForm.iconUrl }]
      : [];
  },
  methods: {
    mouseup() {
      console.log("组件mouseup");
    },
    ok() {
      this.$refs.editForm.validate((valid) => {
        if (valid) {
          this.okLoading = true;
          const data = { ...this.editForm };
          data.installationTime = moment(this.editForm.installationTime).format(
            "YYYY-MM-DD HH:mm:ss"
          );
          console.log("data", data);
          console.log(this.editForm.pipeId);
          this.requeset(this.editForm.pipeId, data)
            .then((res) => {
              // 改变this指向，传回去target ，传回去data
              if (res.code == 200) {
                this.dialogVisible = false;
                data.pipeId = data.pipeId ? data.pipeId : res.data;
                this.lineOkCallBack.call(this.gaodeMap, this.target, data);
                if (!this.editForm.pipeId) {
                  this.gaodeMap.newLineObj = null;
                  this.gaodeMap.createNewLine();
                }

                this.$message({
                  type: "success",
                  offset: 100,
                  // center:true,
                  message: `${
                    this.editForm.pipeId ? "修改管道成功" : "添加管道成功"
                  }`,
                });
              }
            })
            .catch(() => {
              this.okLoading = false;
            });
        }
      });
      // console.log(this.gaodeMap,this.target)
    },
    async requeset(id, data) {
      id ? console.log("修改") : console.log("新增");
      return id ? updatePipe(data) : addPipe(data);
    },
    show() {
      //this.isShow = true;
      this.dialogVisible = true;
      /*setTimeout(() => {
          this.hide()
        }, this.duration)*/
    },
    hide() {
      this.isShow = false;
      this.remove();
    },
    handleClose(done) {
      let options = this.target.getExtData();
      options.lineData = { ...this.editForm };
      this.target.setExtData(options);
      // 把值带出去
      done();

      // this.$confirm("确认关闭？")
      //   .then((_) => {
      //     done();
      //   })
      //   .catch((_) => {});
    },
    // 图片上传成功
    fileFinshed(e) {
      this.editForm.iconUrl = e.url;
      console.log(this.editForm.iconUrl);
    },
    // 图片列表移除
    listRemove(e) {
      this.editForm.iconUrl = "";

      this.fileArr = [];
    },
  },
};
</script>

<style lang="scss">
.notice {
  background: white;
  position: fixed;
  top: 102px;
  right: 0;
  left: 0;
  margin: auto;
  width: 80%;
  height: 80%;
  border: solid 1px;
}
.el-input {
  // width: 200px;
}
</style>