<template>
  <div class="box">
    <el-form ref="dcxlForm" :model="addForm" label-width="60px">
      <el-row class="formStyle">
        <el-col :span="14">
          <div style="
                display: flex;
                flex-direction: row;
                justify-content: space-between;
                margin: 6px 0;
              ">
            <span>地层序列</span>
            <el-button size="mini" type="primary" plain @click="handTabAdd">新增</el-button>
          </div>
          <el-table :data="stratumData" border max-height="250" style="width: 100%" :row-style="{ height: '2px' }"
            :cell-style="{ padding: '2px' }">
            <el-table-column prop="cs" label="垂深m" align="center">
            </el-table-column>
            <el-table-column prop="xs" label="斜深m" align="center">
            </el-table-column>
            <el-table-column prop="cwds" label="层位(底深)" align="center">
            </el-table-column>
            <el-table-column prop="color" label="颜色" align="center">
              <template slot-scope="scope">
                <el-color-picker :disabled="true" v-model="scope.row.color"></el-color-picker>
              </template>
            </el-table-column>
            <el-table-column prop="remark" label="描述" align="center">
            </el-table-column>
            <el-table-column label="操作" align="center" width="100px" fixed="right">
              <template slot-scope="scope">
                <i class="el-icon-edit" style="font-size: 20px; color: #1c84c6; margin-right: 15px"
                  @click="handleStratumEdit(scope.row)"></i>
                <i class="el-icon-delete" style="font-size: 20px; color: #1c84c6; margin-right: 15px"
                  @click="handleDelete(scope.row)"></i>
              </template>
            </el-table-column>
          </el-table>

          <el-row :gutter="10">
            <el-col :span="12">
              <div style="
                    display: flex;
                    flex-direction: row;
                    justify-content: space-between;
                    margin: 6px 0;
                  ">
                <span>孔隙压力系数</span>
                <el-button size="mini" type="primary" plain @click="handPoreAdd">新增</el-button>
              </div>
              <el-table :data="poreData" border style="width: 100%" max-height="390">
                <el-table-column prop="cs" label="垂深m" align="center">
                </el-table-column>
                <el-table-column prop="ylxs" label="压力系数s.g" align="center">
                </el-table-column>
                <el-table-column label="操作" align="center" width="100px" fixed="right">
                  <template slot-scope="scope">
                    <i class="el-icon-edit" style="
                          font-size: 20px;
                          color: #1c84c6;
                          margin-right: 15px;
                        " @click="handlePoreEdit(scope.row)"></i>
                    <i class="el-icon-delete" style="
                          font-size: 20px;
                          color: #1c84c6;
                          margin-right: 15px;
                        " @click="handlePoreDelete(scope.row)"></i>
                  </template>
                </el-table-column>
              </el-table>
            </el-col>
            <el-col :span="12">
              <div style="
                    display: flex;
                    flex-direction: row;
                    justify-content: space-between;
                    margin: 6px 0;
                  ">
                <span>标识特殊岩性层</span>
                <el-button size="mini" type="primary" plain @click="handSpeAdd">新增</el-button>
              </div>
              <el-table max-height="390" :data="SpecialData" border style="width: 100%">
                <el-table-column prop="yx" label="岩性" align="center">
                </el-table-column>
                <el-table-column prop="dings" label="顶深m" align="center">
                </el-table-column>
                <el-table-column prop="dis" label="底深m" align="center">
                </el-table-column>
                <el-table-column label="操作" align="center" width="100px" fixed="right">
                  <template slot-scope="scope">
                    <i class="el-icon-edit" style="
                          font-size: 20px;
                          color: #1c84c6;
                          margin-right: 15px;
                        " @click="handleSpecialEdit(scope.row)"></i>
                    <i class="el-icon-delete" style="
                          font-size: 20px;
                          color: #1c84c6;
                          margin-right: 15px;
                        " @click="handleSpecialDelete(scope.row)"></i>
                  </template>
                </el-table-column>
              </el-table>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="10">
          <!--地层序列图-->
          <div class="svgContainer">
            <div style="display: flex;align-items: center;">
              <div style="font-size: 14px;color: slategrey;transform: rotate(-90deg);width: 68px;">
                垂深(m)
              </div>
              <svg class="dcxlSvg"></svg>

            </div>
            <div style="text-align: center;font-size: 14px;color: slategrey">视平移(m)</div>
          </div>
          <!--          <img style="width: 100%; height: 500px" src="@/assets/images/geologicalScheme104.jpg" alt=""/>-->
        </el-col>
      </el-row>
    </el-form>
    <!-- 地层序列新增修改弹窗 -->
    <el-dialog :title="title" :visible.sync="openDcxl" width="50%" append-to-body center>
      <el-form ref="formDcxl" :model="formDcxl" label-width="80px" :rules="rules">
        <el-row>
          <el-form-item label="垂深m" prop="cs">
            <el-input v-model="formDcxl.cs" placeholder="请输入垂深m"
              oninput="value=value.replace(/^([0-9-]\d*\.?\d{0,2})?.*$/,'$1')"
              @blur="formDcxl.cs = $event.target.value" />
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="斜深m" prop="xs">
            <el-input v-model="formDcxl.xs" placeholder="请输入斜深m"
              oninput="value=value.replace(/^([0-9-]\d*\.?\d{0,2})?.*$/,'$1')"
              @blur="formDcxl.xs = $event.target.value" />
          </el-form-item>
        </el-row>
        <el-row>
          <el-col :span="19">
            <el-form-item label="层位底深" prop="cwds">
              <el-input v-if="!showCascader" v-model="formDcxl.cwds" readonly>
                <template slot="append">
                  <el-button @click="openCascader">选择</el-button>
                </template>
              </el-input>
              <el-cascader style="width: 100% !important;" v-if="showCascader" ref="cascader" v-model="formDcxl.dcid"
                @change="change" :props="mdc">
              </el-cascader>
            </el-form-item>
          </el-col>
          <el-col :span="3">
            <el-form-item label="颜色" prop="color">
              <el-color-picker v-model="formDcxl.color"></el-color-picker>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-form-item label="描述" prop="remark">
            <el-input v-model="formDcxl.remark" placeholder="请输入" />
          </el-form-item>
        </el-row>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 孔隙压力系数新增修改弹窗 -->
    <el-dialog :title="title" :visible.sync="openKxylxs" width="50%" append-to-body center>
      <el-form ref="formKxylxs" :model="formKxylxs" label-width="100px" :rules="rules">
        <el-row>
          <el-form-item label="垂深m" prop="cs">
            <el-input v-model="formKxylxs.cs" placeholder="请输入垂深m"
              oninput="value=value.replace(/^([0-9-]\d*\.?\d{0,2})?.*$/,'$1')"
              @blur="formKxylxs.cs = $event.target.value" />
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="压力系数s.g." prop="ylxs">
            <el-input v-model="formKxylxs.ylxs" placeholder="请输入压力系数s.g."
              oninput="value=value.replace(/^([0-9-]\d*\.?\d{0,2})?.*$/,'$1')"
              @blur="formKxylxs.ylxs = $event.target.value" />
          </el-form-item>
        </el-row>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitPoreForm">确 定</el-button>
        <el-button @click="cancelPore">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 标识特殊岩性层新增修改弹窗 -->
    <el-dialog :title="title" :visible.sync="openBstsyxc" width="50%" append-to-body center>
      <el-form ref="formBstsyxc" :model="formBstsyxc" label-width="160px" :rules="rules">
        <el-row>
          <el-form-item label="岩性" prop="yx">
            <el-input v-model="formBstsyxc.yx" placeholder="请输入垂深m"
              oninput="value=value.replace(/^([0-9-]\d*\.?\d{0,2})?.*$/,'$1')"
              @blur="formBstsyxc.yx = $event.target.value" />
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="顶深m" prop="dings">
            <el-input v-model="formBstsyxc.dings" placeholder="请输入顶深m"
              oninput="value=value.replace(/^([0-9-]\d*\.?\d{0,2})?.*$/,'$1')"
              @blur="formBstsyxc.dings = $event.target.value" />
          </el-form-item>
        </el-row>

        <el-row>
          <el-form-item label="底深m" prop="dis">
            <el-input v-model="formBstsyxc.dis" placeholder="请输入底深m"
              oninput="value=value.replace(/^([0-9-]\d*\.?\d{0,2})?.*$/,'$1')"
              @blur="formBstsyxc.dis = $event.target.value" />
          </el-form-item>
        </el-row>
      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitSpecialForm">确 定</el-button>
        <el-button @click="cancelSpecial">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import * as d3 from "d3";
import {
  getDcxlt,  //地层序列图
  listStratumData, //地层序列
  getStratum,
  addStratum,
  updateStratum,
  delStratum,
  listPoreData, //孔隙压力系数
  getPore,
  addPore,
  updatePore,
  delPore,
  listSpecialData, //标识特殊岩性层
  getSpecial,
  addSpecial,
  updateSpecial,
  delSpecial,
  getGroundTemperature, //地温分布
  addGroundTemperature,
  updateGroundTemperature,
  listDistribution, //分布定义
  addDistribution,
  updateDistribution,
  delDistribution,
  listRes, //输出结果
  addRes,
  updateRes,
  delRes,
} from "@/api/geologicalScheme/stratigraphicSequence/stratigraphicInformation";
import { getMdcByQkid } from "@/api/scientificDrill/schemeOptimization";

export default {
  name: "geologyDcxl",
  data () {
    return {
      addForm: {},
      stratumData: [], //地层序列表格
      poreData: [], //孔隙压力系数
      SpecialData: [],
      openDcxl: false, //地层序列弹窗
      openKxylxs: false, //孔隙压力系数弹窗
      openBstsyxc: false, //标识特殊岩性层弹窗
      checked: true,
      title: "",
      rules: {
        jh: [{ required: true, message: "井号不能为空", trigger: "blur" }],
        jhdm: [
          { required: true, message: "井号代码不能为空", trigger: "blur" },
        ],
      },
      formDcxl: {}, //地层序列弹窗数据
      formBstsyxc: {}, //标识特殊岩性层数据
      formKxylxs: {}, //孔隙压力系数弹窗数据
      showCascader: false,
      oilOptions: [],
      mdc: {
        lazy: true,
        lazyLoad: this.getStratumID
      },
      tabHeight: 0,
      Options: [{ id: 1, dw: "m" }],
      total: 0,
      dcxlSvg: {},
      curvePath: {},
      //svg x y轴
      x1: {},
      y1: {},
      svgLine: {},
      width: 600,
      svgWidth: 600,
      height: 750,
      marginTop: 20,
      marginRight: 0,
      marginBottom: 30,
      marginLeft: 40,
    };
  },
  mounted () {
    this.getDcxlPic()
    this.getStratumList()
    this.getPoreList()
    this.getSpecialList()
  },
  methods: {
    //地层序列图
    getDcxlPic () {
      getDcxlt({ jhdm: this.$route.query.jhdm }).then(res => {
        console.log('地层图', res)
        if (res.code == 200) {
          this.drawDcxlSvg(res.dxxlmap)

        }
      })
    },
    //画地层序列图
    drawDcxlSvg (data) {
      d3.select(".dcxlSvg").selectAll('*').remove();
      /*****************************************************svg1第一个曲线模块*************************************************/
      //x轴比例尺
      this.x1 = d3.scaleLinear([data.xmin, data.xmax], [this.marginLeft, this.width]);
      this.y1 = d3.scaleLinear([data.ymax, data.ymin], [this.height - this.marginBottom, this.marginTop]);
      // 创建svg容器
      this.dcxlSvg = d3.select(".dcxlSvg")
        .attr("viewBox", [0, 0, this.svgWidth, this.height])
        .attr("width", this.width)
        .attr("height", this.height)
        .attr("style", "max-width: 100%; height: auto; height: intrinsic; font: 14px sans-serif;")
        .style("-webkit-tap-highlight-color", "transparent")
      // .style("overflow", "visible")
      // .on("pointerenter pointermove", pointermoved)
      // .on("pointerleave", this.pointerleft)
      // .on("touchstart", event => event.preventDefault());
      // 根据比例尺 创建曲线一x坐标轴
      this.dcxlSvg.append("g")
        .attr("class", "curveXcale ")
        // .attr("transform", `translate(0,${this.marginTop})`)
        .attr("transform", `translate(0,${this.height - this.marginBottom})`)
        .call(d3.axisBottom(this.x1).ticks(6).tickSizeOuter(0))
        // .call(d3.axisTop(x).ticks(this.width / 200).tickSizeOuter(0))
        .call(g => g.selectAll(".tick line").clone()
          // .attr("y2", -150) //-(height-marginTop-marginBottom)
          // .attr("stroke-opacity", 0.1)
          .attr("stroke", "slategrey"))
      // 根据比例尺 创建y坐标轴
      this.dcxlSvg.append("g")
        .attr("class", "curveYcale")
        .attr("transform", `translate(${this.marginLeft},0)`)
        .call(d3.axisLeft(this.y1).ticks(6).tickSizeOuter(0))
        // .call(g => g.select(".domain").remove())
        .call(g => g.selectAll(".tick line").clone()
          // .attr("x2", this.width - this.marginLeft)  //width - marginLeft
          .attr("stroke", "slategrey")
          // .attr("stroke-opacity", 0.1)
          // .attr("stroke-dasharray", "5,5")
        )
      //y坐标轴名称
      // .call(g => g.append("text")
      //   .attr("x", -this.marginLeft)
      //   .attr("y", 10)
      //   .attr("fill", "currentColor")
      //   .attr("text-anchor", "start")
      //   .text("垂深(m)"));
      //地层填充
      // 定义area生成器,填充
      let area = d3.area()
        .x0(d => this.x1(d.x))
        .x1(d => this.x1(d.x1))
        .y0(d => this.y1(d.y)) // 基线
        .y1(d => this.y1(d.y1)); // 数据线
      for (let i = 0; i < data.cwdata.length; i++) {
        this.dcxlSvg.append("path")
          .attr("transform", `translate(0,0)`)
          .datum(data.cwdata[i].wellConstructFill)
          .attr("class", "area")
          .attr("d", area)
          .attr("fill", data.cwdata[i].color); // 设置填充颜色
      }
      // 创建折线
      this.svgLine = d3.line()
        .x(d => this.x1(d.x))
        .y(d => this.y1(d.y));
      // 绘制曲线
      this.curvePath = this.dcxlSvg.append("path")
        .attr("class", "svg1CurveLine")
        // .data(this.aapl2) //取数据，点击事件的d可以打印出数据
        .attr("fill", "none")   //填充
        .attr("stroke", 'rgb(3,120,33)')
        .attr("stroke-width", 3)   //线粗细
        .attr("d", this.svgLine(data.czdata))


      //描述内容
      for (let i = 0; i < data.msdata.length; i++) {
        //(1)取得描述显示的位置
        const textPositionX = this.x1(data.msdata[i].point[0])
        const textPositionY = this.y1(data.msdata[i].point[1])
        //(2) 创建一个分组元素来容纳文本
        const arrowTextGroup = this.dcxlSvg.append("g")
          .attr("transform", "translate(0,0)"); // 定位分组元素
        //(3) 创建一个text元素，并添加tspan子元素来实现多行文本
        const arrowTextElement = arrowTextGroup.append("text")
          .attr("id", "arrowText")//设置id便于移除提示
          .attr("x", textPositionX) // 设置文本的水平位置
          .attr("y", textPositionY) // 设置文本基线的垂直位置
          .attr("fill", "white") // 设置文本填充颜色
        // .attr("font-weight", "bold") // 加粗字体
        // 添加文本
        arrowTextElement.append("tspan")
          .attr("font-weight", "bold") // 加粗字体
          .attr("x", textPositionX)
          .attr("font-size", "16px")
          .text(data.msdata[i].ms);
      }


    },
    /** 查询地层ID */
    getStratumID (node, resolve) {
      const params = {
        dclevel: node.level + 1,
        pid: node.value,
      };
      console.log(params, 'params');
      // 发起请求获取节点数据
      getMdcByQkid(params).then(response => {
        const oilOptions = response.data;
        console.log(oilOptions, 'this.oilOptions');
        if (Array.isArray(oilOptions)) {
          const nodes = oilOptions.map(item => ({
            value: item.id,
            label: item.mc,
            leaf: item.dclevel >= 5
          }));
          console.log(nodes, 'nodes');
          resolve(nodes);
        } else {
        }
      }).catch(error => {

      });
    },
    /** 地层序列查询列表 */
    getStratumList () {
      this.loading = true;
      this.jhdm = this.$route.query.jhdm;
      listStratumData({ jhdm: this.jhdm }).then((response) => {
        console.log(response, "地层序列res");
        this.stratumData = response.rows;
        this.loading = false;
      });
    }, /** 孔隙压力系数查询列表 */
    getPoreList () {
      this.loading = true;
      this.jhdm = this.$route.query.jhdm;
      listPoreData({ jhdm: this.jhdm }).then((response) => {
        console.log(response, "孔隙压力系数res");
        this.poreData = response.rows;
        this.loading = false;
      });
    },
    /** 标识特殊岩性层查询列表 */
    getSpecialList () {
      this.loading = true;
      this.jhdm = this.$route.query.jhdm;
      listSpecialData({ jhdm: this.jhdm }).then((response) => {
        console.log(response, "标识特殊岩性层res");
        this.SpecialData = response.rows;
        this.loading = false;
      });
    },
    /** 地层序列新增弹窗 */
    handTabAdd () {
      this.reset();
      this.openDcxl = true;
      this.title = "地层序列新增";
      this.formDcxl.jh = this.$route.query.jh
      this.formDcxl.jhdm = this.$route.query.jhdm
    },
    /** 修改按钮操作 */
    handleStratumEdit (row) {
      this.reset();
      const id = row.id;
      getStratum(id).then((response) => {
        console.log(response, "地层序列修改");
        this.openDcxl = true;
        this.formDcxl = response.data;
      });
    },
    /** 地层序列删除按钮操作 */
    handleDelete (row) {
      const ids = row.id || this.ids;
      this.$modal
        .confirm('是否确认删除地层序列编号为"' + ids + '"的数据项？')
        .then(function () {
          return delStratum(ids);
        })
        .then(() => {
          this.getStratumList();
          this.getDcxlPic()
          this.$emit('getDcxlPic')
          this.$modal.msgSuccess("删除成功");
        })
        .catch(() => {
        });
    },
    Porereset () {
      this.formKxylxs = {
        cs: "",
        ylxs: "",
        jhdm: "",
        jh: "",
      };
      this.resetForm("formKxylxs");
    },
    /*****孔隙压力系数新增弹窗 */
    handPoreAdd () {
      this.Porereset();
      this.openKxylxs = true;
      this.title = "孔隙压力系数编辑";
      this.formKxylxs.jh = this.$route.query.jh
      this.formKxylxs.jhdm = this.$route.query.jhdm
    },
    /** 孔隙压力系数弹窗关闭 */
    cancelPore () {
      this.Porereset();
      this.openKxylxs = false;
    },
    /** 孔隙压力系数单条查询弹窗 */
    handlePoreEdit (row) {
      this.Porereset();
      const id = row.id;
      getPore(id).then((response) => {
        console.log(response, "修改孔隙压力系数编辑");
        this.openKxylxs = true;
        this.formKxylxs = response.data;
      });
    },
    /** 孔隙压力系数删除按钮操作 */
    handlePoreDelete (row) {
      const ids = row.id || this.ids;
      this.$modal
        .confirm('是否确认删除孔隙压力系数编号为"' + ids + '"的数据项？')
        .then(function () {
          return delPore(ids);
        })
        .then(() => {
          this.getPoreList();
          this.getDcxlPic()
          this.$emit('getDcxlPic')
          this.$modal.msgSuccess("删除成功");
        })
        .catch(() => {
        });
    },
    // 地层序列表单重置
    resetSpecial () {
      this.formBstsyxc = {
        yx: "",
        jh: "",
        jhdm: "",
        dings: "",
        dis: "",
      };

      this.resetForm("formBstsyxc");
    },

    /** 标识特殊岩性层新增弹窗 */
    handSpeAdd () {
      this.resetSpecial();
      this.openBstsyxc = true;
      this.title = "标识特殊岩性层编辑";
      this.formBstsyxc.jh = this.$route.query.jh
      this.formBstsyxc.jhdm = this.$route.query.jhdm
    },
    /** 修改按钮操作 */
    handleSpecialEdit (row) {
      this.resetSpecial();
      const id = row.id;
      getSpecial(id).then((response) => {
        console.log(response, "修改");
        this.openBstsyxc = true;
        this.formBstsyxc = response.data;
      });
    },
    /** 标识特殊岩性层删除按钮操作 */
    handleSpecialDelete (row) {
      const ids = row.id || this.ids;
      this.$modal
        .confirm('是否确认删除标识特殊岩性层编号为"' + ids + '"的数据项？')
        .then(function () {
          return delSpecial(ids);
        })
        .then(() => {
          this.getSpecialList();
          this.getDcxlPic()
          this.$emit('getDcxlPic')
          this.$modal.msgSuccess("删除成功");
        })
        .catch(() => {
        });
    },
    /** 地层序列编辑 */
    submitForm () {
      this.$refs["formDcxl"].validate((valid) => {
        if (valid) {
          let cc = this.formDcxl;
          console.log(cc, 111111);
          if (this.formDcxl.id != null) {
            updateStratum(this.formDcxl).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.openDcxl = false;
              this.getStratumList();
              this.getDcxlPic()
              this.$emit('getDcxlPic')
            });
          } else {
            addStratum(this.formDcxl).then((response) => {
              this.$modal.msgSuccess("新增成功");
              this.openDcxl = false;
              this.getStratumList();
              this.getDcxlPic()
              this.$emit('getDcxlPic')

            });
          }
        }
      });
    },
    /** 地层序列弹窗关闭 */
    cancel () {
      this.reset();
      this.openDcxl = false;
    },
    /** 孔隙压力系数弹窗确定 */
    submitPoreForm () {
      this.$refs["formKxylxs"].validate((valid) => {
        if (valid) {
          if (this.formKxylxs.id != null) {
            updatePore(this.formKxylxs).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.openKxylxs = false;
              this.getPoreList();
              this.getDcxlPic()
              this.$emit('getDcxlPic')
            });
          } else {
            addPore(this.formKxylxs).then((response) => {
              this.$modal.msgSuccess("新增成功");
              this.openKxylxs = false;
              this.getPoreList();
              this.getDcxlPic()
              this.$emit('getDcxlPic')
            });
          }
        }
      });
    },
    /** 标识特殊岩性层编辑 */
    submitSpecialForm () {
      this.$refs["formBstsyxc"].validate((valid) => {
        if (valid) {
          if (this.formBstsyxc.id != null) {
            updateSpecial(this.formBstsyxc).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.openBstsyxc = false;
              this.getSpecialList();
              this.getDcxlPic()
              this.$emit('getDcxlPic')
            });
          } else {
            addSpecial(this.formBstsyxc).then((response) => {
              this.$modal.msgSuccess("新增成功");
              this.openBstsyxc = false;
              this.getSpecialList();
              this.getDcxlPic()
              this.$emit('getDcxlPic')
            });
          }
        }
      });
    },
    /** 地层序列弹窗关闭 */
    cancelSpecial () {
      this.resetSpecial();
      this.openBstsyxc = false;
    },
    // 地层序列表单重置
    reset () {
      this.formDcxl = {
        cs: "",
        xs: "",
        cwds: "",
        dcid: "",
        color: "",
        jhdm: "",
        jh: "",
        remark: "",
      };

      this.formRes = {
        cs: "",
        js: "",
        wd: "",
        jh: "",
        jhdm: "",
        remark: "",
      };
      this.formFB = {
        cs: "",
        wd: "",
        jh: "",
        jhdm: "",
        remark: "",
      };

      this.resetForm("formDcxl");
      this.resetForm("formFB");
      this.resetForm("formRes");
    },
    openCascader () {
      this.showCascader = true;
    },
    change (val) {
      this.showCascader = false; // 选择后关闭级联选择器
      let nodesObj = this.$refs['cascader'].getCheckedNodes();
      console.log(nodesObj, 'nodesObj');
      if (nodesObj && nodesObj.length > 0) {
        const lastNode = nodesObj[nodesObj.length - 1];
        this.formDcxl.dcid = lastNode.value;
        this.formDcxl.cwds = lastNode.label;
        console.log(this.formDcxl.dcid, 'this.formDcxl.dcid ');
      }
    },

    /** 输出结果查询列表 */
    getResList () {
      this.loading = true;
      this.jhdm = this.$route.query.jhdm;
      listRes({ jhdm: this.jhdm }).then((response) => {
        // console.log(response, "输出结果res");
        this.tableDataRes = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.image {
  width: 100%;
  height: 450px;
}

@media screen and (min-width: 1400px),
screen and (min-height: 800px) {
  .image {
    height: 650px;
  }
}

//
// ::v-deep .el-dialog>.el-dialog__header {
//   background-color: #fff !important;
// }
//
// ::v-deep .el-dialog>.el-dialog__body {
//   background-color: #fff !important;
// }
//
// ::v-deep .el-dialog>.el-dialog__footer {
//   background-color: #fff !important;
//   // background-color: red !important;
//   margin-top: -25px;
// }

.box {
  // border: 1px solid red;
  margin: 0 5px;
  min-height: 600px;
  overflow-y: auto;
}

// ::v-deep.el-dialog__header {
//   font-size: 16px;
//   font-weight: 700;
// }
//
// ::v-deep .el-dialog__body {
//   font-size: 16px;
//   font-weight: 700;
//   padding: 5px 20px !important;
// }

::v-deep .tooltip {
  position: absolute;
  background: #f9f9f9;
  color: #333;
  border: solid 1px #ccc;
  padding: 8px;
  border-radius: 4px;
  pointer-events: none;
}

.svgContainer {
  height: calc(100vh - 180px);
  border: 1px solid #ccc;
  margin: 20px;
  padding-right: 10px;
}

.formStyle {
  background-color: #fff;
  border-radius: 10px;
}
</style>
